.progress-button{
    display: inline-block;
    font-size:24px;
    color:#fff !important;
    text-decoration: none !important;
    padding:14px 60px;
    line-height:1;
    overflow: hidden;
    position:relative;
 
    box-shadow:0 1px 1px #ccc;
    border-radius:2px;
 
    background-color: #51b7e6;
    background-image:-webkit-linear-gradient(top, #51b7e6, #4dafdd);
    background-image:-moz-linear-gradient(top, #51b7e6, #4dafdd);
    background-image:linear-gradient(top, #51b7e6, #4dafdd);
}
 
/* Прячем исходный текст кнопок. При загрузке текст будет показан
   в псевдо-элементе :after. */
 
.progress-button.in-progress,
.progress-button.finished{
    color:transparent !important;
}
 
.progress-button.in-progress:after,
.progress-button.finished:after{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    padding-top: inherit;
    color: #fff !important;
    left: 0;
}
 
/* Если кнопка имеет класс, показываем
   содержимое атрибута data-loading */
 
.progress-button.in-progress:after{
    content:attr(data-loading);
}
 
/* То же самое для класса .finished */
 
.progress-button.finished:after{
    content:attr(data-finished);
}
 
/* Цветной индикатор, заполняющий кнопку со временем */
 
.progress-button .tz-bar{
    background-color:#e667c0;
    height:3px;
    bottom:0;
    left:0;
    width:0;
    position:absolute;
    z-index:1;
 
    border-radius:0 0 2px 2px;
 
    -webkit-transition: width 0.5s, height 0.5s;
    -moz-transition: width 0.5s, height 0.5s;
    transition: width 0.5s, height 0.5s;
}
 
/* Индикатор может быть вертикальным или горизонтальным */
 
.progress-button .tz-bar.background-horizontal{
    height:100%;
    border-radius:2px;
}
 
.progress-button .tz-bar.background-vertical{
    height:0;
    top:0;
    width:100%;
    border-radius:2px;
}