Candybar button animation
HTML
<button class="button in-progress">Please wait...</button>
CSS
body {
padding: 40px;
}
.button {
-webkit-transition: box-shadow 0.15s ;
-moz-transition: box-shadow 0.15s ;
-ms-transition: box-shadow 0.15s ;
-o-transition: box-shadow 0.15s ;
transition: box-shadow 0.15s ;
border: 1px solid #b2afa5;
border-color: #e1e0dc #c9c8c1 #b2afa5;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.439);
background: -webkit-linear-gradient(top, #f6f5f0, #e1e0dc);
background: -moz-linear-gradient(top, #f6f5f0, #e1e0dc);
background: -ms-linear-gradient(top, #f6f5f0, #e1e0dc);
background: -o-linear-gradient(top, #f6f5f0, #e1e0dc);
background: linear-gradient(top, #f6f5f0, #e1e0dc);
-pie-background: linear-gradient(top, #f6f5f0, #e1e0dc);
color: #6b635b;
-webkit-box-shadow: rgba(255, 255, 255, 0) 0 0 1px 0, rgba(255, 255, 255, 0) 0 0 0 1px inset, white 0 1px 0 0;
-moz-box-shadow: rgba(255, 255, 255, 0) 0 0 1px 0, rgba(255, 255, 255, 0) 0 0 0 1px inset, white 0 1px 0 0;
-ms-box-shadow: rgba(255, 255, 255, 0) 0 0 1px 0, rgba(255, 255, 255, 0) 0 0 0 1px inset, white 0 1px 0 0;
-o-box-shadow: rgba(255, 255, 255, 0) 0 0 1px 0, rgba(255, 255, 255, 0) 0 0 0 1px inset, white 0 1px 0 0;
box-shadow: rgba(255, 255, 255, 0) 0 0 1px 0, rgba(255, 255, 255, 0) 0 0 0 1px inset, white 0 1px 0 0;
display: inline-block;
white-space: nowrap;
margin: 0;
cursor: pointer;
font-size: 13px;
line-height: normal;
text-align: center;
color: #6b635b;
padding: 5px 9px;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.button.disabled {
color: #bdbbb9;
border: 1px solid #d3d3d3;
cursor: auto;
text-shadow: white 0 1px 0;
-webkit-box-shadow: white 0 1px 0 0 inset;
-moz-box-shadow: white 0 1px 0 0 inset;
-ms-box-shadow: white 0 1px 0 0 inset;
-o-box-shadow: white 0 1px 0 0 inset;
box-shadow: white 0 1px 0 0 inset;
}
.in-progress {
text-shadow: none;
background:...