CSS Button #2 - Code Example

Demo

883.00 B
HTML, JS
Button
animation
MIT License

Code
Editor

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div style="margin:3em;">
<button type="button" class="btn btn-primary btn-lg " id="load1" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button>
<br>
  <br>
<button type="button" class="btn btn-primary btn-lg" id="load2" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button>
</div>

$('.btn').on('click', function() {
    var $this = $(this);
  $this.button('loading');
    setTimeout(function() {
       $this.button('reset');
   }, 5000);
});

HTML
JS

Let’s dive into a fun little piece of code that jazzes up a web page with some nifty button animations using Bootstrap. Imagine you’re setting up an online shop, and you want to make the checkout process a bit more engaging for your customers. This code snippet is your little helper in achieving just that.

First off, we’re bringing in some heavy hitters from the web world: Bootstrap and Font Awesome. Bootstrap is like the Swiss Army knife for web developers, making it a breeze to create responsive and good-looking sites. Font Awesome, on the other hand, is your go-to for all those neat icons you see sprinkled across the web.

Now, to the heart of the matter: we’ve got two buttons. Both are styled to look big and important, thanks to Bootstrap’s btn, btn-primary, and btn-lg classes. But here’s where the magic happens. When you click on these buttons, they don’t just sit there; they come alive with spinning icons, signaling that something is happening in the background (like processing an order). One button shows a spinning circle, and the other a spinning spinner icon. It’s all about giving your users that visual cue that their request is being handled.

And how does this animation start? With a bit of jQuery magic. When either button is clicked, we change its label to show the spinning icon, simulating a loading process. This animation keeps going for a spell (5 seconds to be exact), after which the button goes back to its original state. It’s a simple but effective way to make your web interactions feel more dynamic and responsive.

So, in a nutshell, this code snippet is about making buttons on your web page not just clickable but also lively and informative, using Bootstrap’s styles and some jQuery tricks. It’s a small touch, but it’s these little details that can make your web page stand out in the sea of the internet.