JSFiddle - React, Tailwind, and code Playground

buttons

by Dug Sohn

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<br><br>
<div class="container">
  <div class="row">
    <div class="col-xs-12">

      <h2>
        Button With Success
      </h2>
      <br>
    </div>
    <div class="col-xs-4">

      <button class="btn btn-block btn-default success-loadey" data-toggle="tooltip">
    <i class="fa fa-fw"></i> <span class="btn-label">Button Label</span>
    </button>
    </div>

  </div>
</div>
<br><br>
<div class="container">
  <div class="row">
    <div class="col-xs-12">

      <h2>
        Button With Slow Load
      </h2>
      <br>
    </div>
    <div class="col-xs-4">

      <button class="btn btn-block btn-default slow-loadey" data-toggle="tooltip">
    <i class="fa fa-fw"></i> <span class="btn-label">Button Label</span>
    </button>
    </div>

  </div>
</div>
<br><br>
<div class="container">
  <div class="row">
    <div class="col-xs-12">

      <h2>
        Button With Error
      </h2>
      <br>
    </div>
    <div class="col-xs-4">

      <button class="btn btn-block btn-default no-loadey" data-toggle="tooltip">
    <i class="fa fa-fw"></i> <span class="btn-label">Button Label</span>
    </button>
      <small style="display:none">Please Check Errors and <a href="#stay" class="btn-error">Try Again</a></small>
    </div>

  </div>
</div>
<br><br>

SCSS

$account-base:  rgba(6,81,128,1.0)       !default;
$plans-base:    rgba(254,162,32,1.0)     !default;
$payment-base:  rgba(46,177,52,1.0)      !default;
$control-base:  rgba(27,141,205,1.0)     !default;
$footer-base:   rgba(231,231,231,1.0)    !default;
$dark-base:     rgba(10,10,10,1.0)       !default;
$highlight-row:  rgba(241,240,207, 0.8) !default;

@import url('https://fonts.googleapis.com/css?family=Open+Sans');


* {
font-family:  "Open Sans", "Segoe UI", Tahoma, sans-serif
}
.btn {
   border-radius: 2px;
   text-transform: uppercase;
 
}
.fa {
  margin-left:-20px;
}

.btn-default {
    color: #fff;
    background-color: rgba(46,177,52,1.0);
    border-color: rgba(46,177,52,1.0);
 }
  
.btn-default:hover, .btn-default:focus {
    color: #fff;
    background-color: #47a447;
    border-color: #398439;
 }

 
 .btn-warning {
    color: #fff;
    background-color:  rgba(254,162,32,1.0)!important ;
    border-color:  rgba(254,162,32,1.0)important;
 }
  
.btn-success:hover, .btn-success:focus {
    color:  rgba(46,177,52,1.0);
    background-color: #fff;
    border-color:  rgba(46,177,52,1.0);
 }
 
 
 .btn-success {
    color:  rgba(46,177,52,1.0);
    background-color: #fff;
    border-color: rgba(46,177,52,1.0);
 }
  
.btn-success:hover, .btn-success:focus {
    color:  rgba(46,177,52,1.0);
    background-color: #fff;
    border-color:  rgba(46,177,52,1.0);
 }
 
 .btn-danger {
    color:  #fff;
    background-color: red;
    border-color: red;
 }
  
.btn-danger:hover, .btn-danger:focus {
    color: #fff;
    background-color: red;
    border-color:  red;
 }

JavaScript

$('[data-toggle="tooltip"]').tooltip();

    $('.success-loadey').click(function() {
      $(this).removeClass('btn-success').find('.fa-fw').addClass('fa-spin fa-circle-o-notch');


      var $el = $(this);
      setTimeout(function() {

        $el.find('.fa-fw').removeClass('fa-spin fa-circle-o-notch').addClass('fa-check');
        $el.addClass('btn-success');
      }, 4000);

    });



    $('.slow-loadey').click(function() {
      $(this).removeClass('btn-success btn-warning').find('.fa-fw').addClass('fa-spin fa-circle-o-notch');

      var $el = $(this);
      setTimeout(function() {

        $(this).find('.btn-label').html("Please Wait");

        $el.prop('title', 'This is taking a bit long');
        $el.addClass('btn-warning');
      }, 5000);

      setTimeout(function() {
        $el.prop('title', '');

        $el.find('.fa-fw').removeClass('fa-spin fa-circle-o-notch').addClass('fa-check');
        $el.addClass('btn-success').removeClass('btn-warning');
      }, 10000);

    });


    $('.no-loadey').click(function() {
      $(this).removeClass('btn-danger').find('.fa-fw').addClass('fa-spin fa-circle-o-notch');

      var $el = $(this);
      setTimeout(function() {

        $el.find('.fa-fw').removeClass('fa-spin fa-circle-o-notch').addClass('fa-warning');
        $el.addClass('btn-danger');
        $el.parent().find('small').show();
      }, 4000);

    });



    $('.btn-error').click(function() {
      $('.no-loadey').removeClass('btn-danger').find('.fa-fw').removeClass('fa-warning').addClass('fa-spin fa-circle-o-notch');
      $('.no-loadey').next().hide();

      var $el = $(this);
      setTimeout(function() {

        $('.no-loadey').find('.fa-fw').removeClass('fa-spin fa-circle-o-notch').addClass('fa-check');
        $('.no-loadey').addClass('btn-success');
      }, 4000);

    });