Loading Buttons in CSS
- The Tech Platform
- Jul 20, 2021
- 1 min read
To use the Font Awesome icons, add the following line inside the <head> section of your HTML page:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">Below is the example where we have 5 types of Loading Buttons:
Code:
<!DOCTYPE html>
<html>
<head>
<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">
<style>
.buttonload {
background-color: blue;
border: solid-black ;
color: yellow;
padding: 12px 24px;
font-size: 18px;
}
/* Add a right margin to each icon */
.fa {
margin-left: -12px;
margin-right: 8px;
}
</style>
</head>
<body>
<h2>Loading Buttons in CSS</h2>
<button class="buttonload">
<i class="fa fa-spinner fa-spin"></i>Loading
</button>
<button class="buttonload">
<i class="fa fa-circle-o-notch fa-spin"></i>Loading
</button>
<button class="buttonload">
<i class="fa fa-refresh fa-spin"></i>Loading
</button>
<button class="buttonload">
<i class="fa fa-spinner fa-pulse"></i>Loading
</button>
<button class="buttonload">
<i class="fa fa-gear fa-spin"></i>Loading
</button>
</body>
</html>Output:
For more Font Awesome icons visit - https://fontawesome.com/ . For more information or any queries related to this article, Contact us - www.thetechplatform.com or Social Platforms @thetechplatform
Resource: Wikipedia , W3school
The Tech Platform
Trump threatens Telly Updates new tariffs on European allies over Greenland until deal reached, as thousands protest
These wholesale T-shirts are perfect for events, promotions, and small clothing brands.
Really enjoyed reading your blog. It is highly informative and builds great interest for the readers. For the people like us your blogs helps to get ideal information and knowledge. Thanks for providing such blogs. John Dutton Jacket
Hope more people will read this article keep up the good work This Arsenal Varsity Jacket is Awesome. It’s help me a lot. Please keep up your good work. We are always with you and Waiting for your new interesting articles
The content was really very interesting. I am really thankful to you for providing this unique information You have a good point here! I totally agree with what you have said!! Thanks for sharing your views. Kyle Kuzma Pink Sweater