How to create icon buttons in html using css

Jennifer December 26, 2023 HTML

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:

Popular Posts

Total Views: 289

Posted in CSS, HTML, Web Technologies

Tagged button icons, how to add icon to a button, how to add icons in button in html, how to add icons to the button in html, how to create icon buttons in html, how to create icon buttons in html using css, icon button