Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

Onclick Button Loading Animation CSS

Muhammad Asif by Muhammad Asif
June 18, 2022
in CSS Animation
0
Onclick Button Loading Animation CSS
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

An animated button is an interactive way to quickly inform the users about the next process. It attracts the users as well as aware them about the next process is still loading. In this tutorial, you will come to know how to create an onclick button loading animation using HTML, CSS, and JS.

As you have seen in the above preview, there is a black button with a green spinner loader inside it. The spinner animates on the click event and after a certain time, the button comes back to its previous state. You can view the button animation in the following video:

Video Preview

https://codeconvey.com/wp-content/uploads/2022/06/onclick-button-loading-animation-css.webm

The idea of button loading animation is very simple. We will create a button and spinner icon with CSS. We will keep the spinner in a separate class and add it to the button on the click event to display the loading animation. Similarly, we’ll change the button text and after a certain time period, we’ll remove the spinning class and set the previous button text.

The button and spinner color can be customized according to your needs. You can also check these CSS button styles to set the custom style for button animation.

The HTML Code

First of all, create the HTML button element with a class name "twoToneButton", wrap it into a div element and define its class name "twoToneCenter". Basically, the wrapper element is optional to align the button to the center.

<div class="twoToneCenter">
    
    <button class="twoToneButton">Sign In</button>
    
</div>

Place the above HTML code where you want to display the button. You can also create a hyperlink or virtual button by adding the class name "twoToneButton" to the anchor tag. Similarly, you can add this class name to your existing buttons in which you want to integrate loading animation.

CSS Styles for Button Loading Animation

In CSS, select the container class and define the text-align property with "center" value to align the button to the center of the page (or parent element). Similarly, define the margin property with the “1em 0” value to leave some space for the top and bottom of the button’s container

.twoToneCenter {
  text-align: center;
  margin: 1em 0;
}

After that, select the "twoToneButton" class and display it as an inline-block element. Use the CSS outline property with "none" value in order to remove the default button’s outline. Define the padding, line height, background, and color property with the mentioned values. Likewise, specify values for text-shadow, position, transition, and box-shadow as follows:

.twoToneButton {
  display: inline-block;
  outline: none;
  padding: 10px 20px;
  line-height: 1.4;
  background: #212121;
  background: linear-gradient(to bottom, #545454 0%, #474747 50%, #141414 51%, #1b1b1b 100%);
  border-radius: 4px;
  border: 1px solid #000000;
  color: #dadada;
  text-shadow: #000000 -1px -1px 0px;
  position: relative;
  transition: padding-right 0.3s ease;
  font-weight: 700;
  box-shadow: 0 1px 0 #6e6e6e inset, 0px 1px 0 #3b3b3b;
}

Now, target the button class with the hover pseudo-selector and define the box-shadow with inset values as follows:

.twoToneButton:hover {
  box-shadow: 0 0 10px #080808 inset, 0px 1px 0 #3b3b3b;
  color: #f3f3f3;
}

In the same way, select the button class with an active pseudo selector and define the box-shadow, color, and background as follows:

.twoToneButton:active {
  box-shadow: 0 0 10px #080808 inset, 0px 1px 0 #3b3b3b;
  color: #ffffff;
  background: #080808;
  background: linear-gradient(to bottom, #3b3b3b 0%, #2e2e2e 50%, #141414 51%, #080808 100%);
}

After defining the basic styles for the button, now it’s time to style the spinner loader inside the button. So, target the “spinning” class and define the background color. This class will be added to the button element onclick event and a loading spinner will be displayed inside the button.

.twoToneButton.spinning {
  background-color: #212121;
  padding-right: 40px;
}

Likewise, target the :after and :before pseudo-selector and define the content property with a blank value. Specify the right and top properties with 6px and 50% values respectively. Keep the 0 value for both width and height properties, define the box shadow, and set the absolute position. Use the CSS border radius with 50% value in order to make the circular spinner. Define the animation-name "rotate360" and exist with infinite linear forwards ease values.

.twoToneButton.spinning:after {
  content: '';
  right: 6px;
  top: 50%;
  width: 0;
  height: 0;
  box-shadow: 0px 0px 0 1px #080808;
  position: absolute;
  border-radius: 50%;
  -webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
          animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}
.twoToneButton.spinning:before {
  content: "";
  width: 0px;
  height: 0px;
  border-radius: 50%;
  right: 6px;
  top: 50%;
  position: absolute;
  border: 2px solid #000000;
  border-right: 3px solid #27ae60;
  -webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
          animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}

Finally, define the animation keyframes for the "rotate360" and "exist" animation as follows:

@-webkit-keyframes rotate360 {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes exist {
  100% {
    width: 15px;
    height: 15px;
    margin: -8px 5px 0 0;
  }
}
@keyframes exist {
  100% {
    width: 15px;
    height: 15px;
    margin: -8px 5px 0 0;
  }
}

Button Loading Animation JS Function

After creating the HTML and CSS for the animated button, now it’s time to apply the spinner loading animation on the click event. To do so, we’ll use JavaScript click event and change the button inner HTML and a class name “spinning” to display a loader inside the button. On the other hand, we’ll use the JavaScript setTimeout function to remove the spinning class and inner HTML to take the button to its previous state. So, the following is the complete JS function to animate the button.

$(function(){
    
    var twoToneButton = document.querySelector('.twoToneButton');
    
    twoToneButton.addEventListener("click", function() {
        twoToneButton.innerHTML = "Signing In";
        twoToneButton.classList.add('spinning');
        
      setTimeout( 
            function  (){  
                twoToneButton.classList.remove('spinning');
                twoToneButton.innerHTML = "Sign In";
                
            }, 6000);
    }, false);
    
});

That’s all! I hope, you have successfully created a CSS onclick button loading animation. If you have any suggestions or questions, feel free to comment below. Happy coding 🙂

Demo Download
Previous Post

CSS Background Image Flicker Effect

Next Post

Vertical Scrolling News Ticker HTML

Next Post
Vertical Scrolling News Ticker HTML

Vertical Scrolling News Ticker HTML

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
Easy to Apply CSS Image Hover Transition Effects

CSS Image Hover Transition Effects

December 5, 2019
Video Parallax Background

Fullscreen Video Parallax Background Using CSS3

December 22, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.