Css3 animations Buttons

by Plippie Plop

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div id="main-form" class="main-form form-steps form-horizontal">

<div class="control-group">
            <label class="control-label" for="element_20">TEL</label>
            <div class="controls">
              <div class="input-append">
                <input data-custval="true" data-custval-type="telephone" data-format="NlPhonenumber" data-val="true" id="element_20" name="element_20" type="text">
                <a class="btn btn-sms01" data-ajaxload="true" data-ajaxload-elet="20" data-ajaxload-fnt="SendSMS" data-format="inputAppend" href="javascript:void(0);"><i class="icon-comment"></i> SMS</a></div>
            </div>
          </div>
    
    
    <div class="control-group">
            <label class="control-label" for="element_20">TEL</label>
            <div class="controls">
              <div class="input-append">
                <input data-custval="true" data-custval-type="telephone" data-format="NlPhonenumber" data-val="true" id="element_20" name="element_20" type="text">
                <a class="btn btn-sms02 btn-spin" data-ajaxload="true" data-ajaxload-elet="20" data-ajaxload-fnt="SendSMS" data-format="inputAppend" href="javascript:void(0);"><i class="icon-comment"></i> SMS</a>
                  </div>
            </div>
          </div>
       

    
    
    
    
    </div>

CSS

/* reset */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
  font-family: 'FontAwesome';
  src: url('http://stdemo1.archifact.nl/master-css/fonts/fontawesome-webfont.eot');
  src: url('http://stdemo1.archifact.nl/master-css/fonts/fontawesome-webfont.eot#iefix') format('embedded-opentype'),
    url('https://raw.github.com/FortAwesome/Font-Awesome/master/font/fontawesome-webfont.woff') format('woff'),
    url('http://stdemo1.archifact.nl/master-css/fonts/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body{
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 14px;    
}


/* STYLE */

/* forms */
.form-horizontal .control-group {
padding: 5px;
padding-bottom: 10px;
margin: 0;
position: relative;
}

/* BUTTONS */
.btn {
font-family: 'Open Sans';
padding: 6.5px 12px;
}
/* labels */
.form-horizontal .control-label {
font-weight: bold;
}

.btn, .btn:active, .btn:focus {
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
.btn {
padding: 6.5px 12px;
}

select, input[type="text"], input[type="password"],...

JavaScript

$('.btn-sms01').on('click',function(e){
  e.preventDefault();
    $(this).addClass('spin-lock1').find('i').removeClass('icon-comment').addClass('icon-spinner icon-spin');
    setTimeout(function () {
        $('.btn-sms01').removeClass('spin-lock1').find('i').removeClass('icon-spinner icon-spin').addClass('icon-comment');
    },3000);
                                                             
});

$('.btn-sms02').on('click',function(e){
  e.preventDefault();
    $(this).addClass('spin-lock2').after('<div class="spinner"><i class="icon-spinner icon-spin"></i></div>');  
     setTimeout(function () {
        $('.spinner').remove();
         $('.btn-sms02').removeClass('spin-lock2');
    },4000);
                                                             
});