#e8e8e8
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
Comments
MIT License