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 btn-primary" 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">Mob </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-primary" data-ajaxload="true" data-ajaxload-elet="20" data-ajaxload-fnt="SendSMS" data-format="inputAppend" href="javascript:void(0);"><i class="icon-mobile-phone"></i> SMS</a></div>
            </div>
          </div>
    
    <div class="control-group">
            <label class="control-label" for="element_20">Coffee? </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-sms03 btn-primary" data-ajaxload="true" data-ajaxload-elet="20" data-ajaxload-fnt="SendSMS" data-format="inputAppend" href="javascript:void(0);"><i class="icon-coffee"></i> Cup</a></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 */
.form-horizontal .control-label {
float: left;
width: 100px;
}
.form-horizontal .controls {margin-left:100px;}

/* 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:...

JavaScript

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

$('.btn-sms02').on('click',function(e){
  e.preventDefault();
    $(this).addClass('spin-lock1').find('i').removeClass('icon-mobile-phone').addClass('icon-refresh icon-spin');
    setTimeout(function () {
        $('.btn-sms02').removeClass('spin-lock1 btn-primary').find('i').removeClass('icon-spinner icon-spin').addClass('icon-mobile-phone');
    },3000);
                                                             
});

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

$('.page-link').on('click',function(e){
  e.preventDefault();
    $(this).addClass('spin-lock1').find('i').removeClass('icon-arrow-right').addClass('icon-spinner icon-spin');
    setTimeout(function () {
        $('.page-link').removeClass('spin-lock1 btn-primary').attr('disabled',true).find('i').removeClass('icon-spinner icon-spin').addClass('icon-ok-sign');
    },3000);
                                                             
});