Menu Close

How to create html loading buttons

Jennifer
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: 136
Posted in CSS, HTML, Web Technologies
Tagged , ,

You can also read...