How to create html loading buttons

Jennifer February 27, 2024 HTML

Loading button

Here, we will see how to create html loading buttons using font awesome icons. We need to add the font awesome icon library to the header and add the icons class names to the button. It will show the loader icons to our buttons. Follow the below example to achieve this.

Create a html file on your computer and add the below codes into this file.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How to create html loading buttons</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Loading Buttons</h2>
    <button class="btn-load">
        <i class="fa fa-spinner fa-spin"></i>Loading
    </button>
    <button class="btn-load">
        <i class="fa fa-circle-o-notch fa-spin"></i>Loading
    </button>
    <button class="btn-load">
        <i class="fa fa-refresh fa-spin"></i>Loading
    </button>
</body>
</html>

Then add the below stylesheet into the html file to achieve loading buttons.

html, body{
    padding: 100px;
    text-align: center;
    font-family: sans-serif;
}

.btn-load {
    font-size: 15px;
    background-color: #FF7F50;
    border: none;
    color: #fff;
    padding: 15px 30px;
    margin: 10px;
}

.fa {
    margin-left: -10px;
    margin-right: 8px;
}

Popular Posts

Total Views: 402

Posted in CSS, HTML, Web Technologies

Tagged how to create html loading buttons, how to create loading buttons, how to create loading buttons with css