How To Create Loading Buttons

How to create loading button with css

How To Style Loading Button

Add an icon library, such as Font Awesome, and append icons to HTML buttons:

<!-- Add icon library -->
<link rel="stylesheet" href="">

<!-- Add font awesome icons to buttons (note that the fa-spin class rotates the icon) -->
<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i>Loading

<button class="buttonload">
  <i class="fa fa-circle-o-notch fa-spin"></i>Loading

<button class="buttonload">
  <i class="fa fa-refresh fa-spin"></i>Loading


Add CSS:

/* Style buttons */
.buttonload {
  background-color: #4CAF50; /* Green background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px 16px; /* Some padding */
  font-size: 16px /* Set a font size */

1 Comment

Leave a Reply