Loading Button in CSS

Hello internet people, Today in this blog I will show you how to create a loading button using HTML & CSS. Earlier, you learned to Create Client Side Form Validation in Javascript.

What is Loading Button?

Loading Button is a button with some animations which you see on the screen while loading some content of the website after clicking send/submit/proceed button. Generally, a loading button is added to websites to make the visitor feel amazing. It’s the unique and best method to interact with visitors. Visitors will not feel bored in the presence of such a button while loading the content of the website like text, photos, videos, etc.

After reading this blog carefully, you will surely be able to create such a loading button. I have tried to explain it in a very simple and easy way. At first, I created a wrapper with full width & height having dark blue background. Inside the wrapper, there is a button with some text and one icon. The icon is fetched from font awesome using CDN. I have given circular moving animation to the icon which is most necessary for making the loading button.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Loading Button using HTML & CSS).

Video Tutorial of Loading Button using HTML & CSS

All this loading button design is based on HTML & CSS only. If you’re a beginner you can also create this type of loading button. If you like this program (Loading Button using HTML & CSS) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.

Loading Button using HTML & CSS [Source Codes]

To create this program (Loading Button using HTML & CSS). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following code into your file. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
    <link rel="stylesheet" href="style.css">
    <title>Loading Button</title>
</head>
<body>
    <div class="wrapper">
        <button><i class="fas fa-spinner"></i> Loading</button>
    </div>
</body>
</html>

Second, create a CSS file with the name style.css and paste the given code into your CSS file. Remember, you’ve to create a file with a .css extension.

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.wrapper{
    width: 100%;
    height: 100vh;
    background-color: #040342;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper button{
    padding: 25px 60px;
    border: none;
    background-color: #06af06;
    font-size: 30px;
    border-radius: 5px;
}
.wrapper button i{
    font-size: 35px;
    animation: loader 1.5s linear infinite;
}
@keyframes loader{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

That’s all, now you’ve successfully created a loading button using HTML & CSS. If your code does not work or you’ve faced any errors/problems then please comment down your queries. If you feel this article had helped you, please share it with your friends. Subscribe to our Website by pressing the bell icon at the right bottom. We will send you notifications regarding our new posts and other tips and tricks. You can unsubscribe again anytime you like.

What is Loading Button?

You Might Also Like

Video Tutorial of Loading Button using HTML & CSS

Loading Button using HTML & CSS [Source Codes]

HTML

CSS

Thank You :)

Post a Comment

Post a Comment

About Us

Contact Form