.entry-content .btn-gelatin-blue,
.entry-content .btn-gelatin-red,
.entry-content .btn-gelatin-green,
.entry-content .btn-gelatin-purple,
.entry-content .btn-gelatin-gray{ 
width: 500px;
font-size: 28px;
font-weight: bold;
margin: 10px auto 20px;
display: block;
text-decoration: none;
text-align: center;
position: relative;
outline: none;
color: #fff;
line-height: 2.3;
border-radius: 3px;
border: none;
-webkit-transition: -webkit-box-shadow .3s;
-webkit-transition: box-shadow .3s;
transition: box-shadow .3s;
}
.btn-gelatin-blue,
input.btn-gelatin-blue{
background: #1253A4;
box-shadow: 0 0 0 -2px #CFF09E, 0 0 0 -1px #FE4365;
}
.btn-gelatin-red,
input.btn-gelatin-red{
background: #e5000b;
box-shadow: 0 0 0 -2px #CFF09E, 0 0 0 -1px #FE4365;
}
.btn-gelatin-green,
input.btn-gelatin-green{
background: #008c4b;
box-shadow: 0 0 0 -2px #CFF09E, 0 0 0 -1px #FE4365;
}
.btn-gelatin-purple,
input.btn-gelatin-purple{
background: #ad1283;
box-shadow: 0 0 0 -2px #CFF09E, 0 0 0 -1px #FE4365;
}
.btn-gelatin-gray,
input.btn-gelatin-gray{
background: #2e2e2e;
box-shadow: 0 0 0 -2px #CFF09E, 0 0 0 -1px #FE4365;
}
input.btn-gelatin-blue,
input.btn-gelatin-red,
input.btn-gelatin-green,
input.btn-gelatin-purple,
input.btn-gelatin-gray {
line-height: normal !important;
}
.btn-gelatin-blue a,
.btn-gelatin-red a,
.btn-gelatin-green a,
.btn-gelatin-purple a,
.btn-gelatin-gray a{
color: #fff;
text-decoration: none;
}
.btn-gelatin-blue:hover, .btn-gelatin-blue:focus,
.btn-gelatin-red:hover, .btn-gelatin-red:focus,
.btn-gelatin-green:hover, .btn-gelatin-green:focus,
.btn-gelatin-purple:hover, .btn-gelatin-purple:focus,
.btn-gelatin-gray:hover, .btn-gelatin-gray:focus{
-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
-webkit-animation: gelatine 0.5s 1;
animation: gelatine 0.5s 1;
}
.btn-gelatin-blue:hover, .btn-gelatin-blue:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1253A4;
}
.btn-gelatin-red:hover, .btn-gelatin-red:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e5000b;
}
.btn-gelatin-green:hover, .btn-gelatin-green:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #008c4b;
}
.btn-gelatin-purple:hover, .btn-gelatin-purple:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ad1283;
}
.btn-gelatin-gray:hover, .btn-gelatin-gray:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2e2e2e;
}
.btn-gelatin-blue:active,
.btn-gelatin-red:active,
.btn-gelatin-green:active,
.btn-gelatin-purple:active,
.btn-gelatin-gray:active{
background: #4ECDC4;
-webkit-transition-duration: 0;
transition-duration: 0;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3ac7bd;
} @keyframes gelatine {
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
@-webkit-keyframes gelatine {
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}