In this blog, we will learn how to create icon buttons in html using css. Icons on the button makes the user easy to understand the functionality of that button. For the icons we have to use external links like font awesome. So, we have to add font awesome link on the header section. Follow the below snippet to achieve this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to create icon buttons in html using css</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn-class{
padding: 40px;
text-align: center;
}
.btn {
background: #FFB6C1;
padding: 12px 30px;
margin: 10px;
font-size: 16px;
border: none;
}
.btn:hover {
background-color: #89CFF0;
}
</style>
</head>
<body>
<div class="btn-class">
<h2>How to create icon buttons in html</h2>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>
</div>
</body>
</html>
Output:

Popular Posts
- Show / Hide div based on dropdown selected using jQuery
- Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
- Custom Authentication Login And Registration Using Laravel 8
- Infinite Scrolling on PHP website using jQuery and Ajax with example
- Google Login or Sign In with Angular Application
- How to Convert MySQL Data to JSON using PHP
- How to change date format in PHP?
- Image Lazy loading Using Slick Slider
- Slick Slider Basic With Example
- php in_array check for multiple values
- Adaptive Height In Slick Slider
- Slick Slider Center Mode With Example
- How to Scroll to an Element with Vue 3 and ?
- JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
- Slick Slider Multiple Items With Example
Total Views: 793