Menu Close

How to create html loading buttons

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">
    <title>How to create html loading buttons</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <h2>Loading Buttons</h2>
    <button class="btn-load">
        <i class="fa fa-spinner fa-spin"></i>Loading
    <button class="btn-load">
        <i class="fa fa-circle-o-notch fa-spin"></i>Loading
    <button class="btn-load">
        <i class="fa fa-refresh fa-spin"></i>Loading

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;
Posted in CSS, HTML, Web Technologies

You can also read...