Article Categories

Selected Reading

How to create icon buttons with CSS?

CSS Web Development Front End Technology

To create icon buttons with CSS, you need to combine HTML button elements with icon fonts. Here, we will use Font Awesome icons to create attractive, interactive buttons with both icons and text.

Syntax

button {
    /* Basic button styling */
    background-color: color;
    border: none;
    color: text-color;
    padding: value;
    cursor: pointer;
}

i {
    /* Icon styling */
    padding: value;
    color: icon-color;
}

Setting Up Font Awesome

To add icons to your buttons, include the Font Awesome CDN in your HTML head section −

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Creating Icon Buttons

Place the icon inside the button element using the <i> tag with appropriate Font Awesome classes −

<button><i class="fa fa-home"></i> Home</button>
<button><i class="fa fa-phone"></i> Call Us</button>
<button><i class="fa fa-cog"></i> Settings</button>

Example: Complete Icon Button Implementation

The following example demonstrates how to create styled icon buttons with hover effects −

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        button {
            font-family: Arial, sans-serif;
            background-color: #1e90ff;
            border: none;
            color: white;
            padding: 15px 25px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            margin: 10px;
            transition: background-color 0.3s;
        }
        
        button i {
            margin-right: 8px;
            color: #ffffff;
        }
        
        button:hover {
            background-color: #4169e1;
        }
        
        button:hover i {
            color: #ffff00;
        }
    </style>
</head>
<body>
    <h2>Icon Buttons Example</h2>
    <button><i class="fa fa-home"></i> Home</button>
    <button><i class="fa fa-phone"></i> Call Us</button>
    <button><i class="fa fa-map-marker"></i> Visit Us</button>
    <button><i class="fa fa-cog"></i> Settings</button>
    <button><i class="fa fa-user"></i> Login</button>
</body>
</html>

Five blue rounded buttons with white text appear on the page. Each button contains an icon (home, phone, map marker, settings gear, and user) followed by descriptive text. When hovering over the buttons, they change to a darker blue background and the icons turn yellow.

Key Properties

Property	Purpose
`cursor: pointer`	Makes the button appear clickable
`transition`	Smooths hover effects
`margin-right` on icon	Creates space between icon and text
`border-radius`	Creates rounded button corners

Conclusion

Icon buttons enhance user experience by combining visual icons with text labels. Use Font Awesome for consistent icons, proper spacing with margin, and hover effects to create professional-looking interactive buttons.

AmitDiwan

Updated on: 2026-03-15T14:32:54+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next