Menu Close

How to create icon buttons in html using css

toolbar

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:

icon-btn

Share

Posted in CSS, HTML, Web Technologies

You can also read...