1button {
2 height: 2.8em;
3 width: 9em;
4 background: transparent;
5 -webkit-animation: jello-horizontal 0.9s both;
6 animation: jello-horizontal 0.9s both;
7 border: 2px solid #016DD9;
8 outline: none;
9 color: #016DD9;
10 font-size: 17px;
11}
12
13button:hover {
14 background: #016DD9;
15 color: #ffffff;
16 animation: squeeze3124 0.9s both;
17}
18
19@keyframes squeeze3124 {
20 0% {
21  -webkit-transform: scale3d(1, 1, 1);
22  transform: scale3d(1, 1, 1);
23 }
24
25 30% {
26  -webkit-transform: scale3d(1.25, 0.75, 1);
27  transform: scale3d(1.25, 0.75, 1);
28 }
29
30 40% {
31  -webkit-transform: scale3d(0.75, 1.25, 1);
32  transform: scale3d(0.75, 1.25, 1);
33 }
34
35 50% {
36  -webkit-transform: scale3d(1.15, 0.85, 1);
37  transform: scale3d(1.15, 0.85, 1);
38 }
39
40 65% {
41  -webkit-transform: scale3d(0.95, 1.05, 1);
42  transform: scale3d(0.95, 1.05, 1);
43 }
44
45 75% {
46  -webkit-transform: scale3d(1.05, 0.95, 1);
47  transform: scale3d(1.05, 0.95, 1);
48 }
49
50 100% {
51  -webkit-transform: scale3d(1, 1, 1);
52  transform: scale3d(1, 1, 1);
53 }
54}
55