#e8e8e8
1button { 2 position: relative; 3 width: 150px; 4 height: 60px; 5 overflow: hidden; 6 border: 1px solid black; 7 border-radius: 50px; 8 padding-left: 35px; 9 box-shadow: 2.9px 2.9px 2.2px rgba(0, 0, 0, 0.019), 10 5.2px 5.2px 5.3px rgba(0, 0, 0, 0.023), 11 7px 7px 10px rgba(0, 0, 0, 0.025), 12 8.7px 8.7px 17.9px rgba(0, 0, 0, 0.024), 13 11.3px 11.3px 33.4px rgba(0, 0, 0, 0.023), 14 20px 20px 80px rgba(0, 0, 0, 0.02); 15} 16 17.pika { 18 position: absolute; 19 top: -100%; 20 left: 42%; 21 transition: 0.5s all; 22 animation: tilt 1.1s infinite ease-in-out; 23} 24 25@keyframes tilt { 26 0% { 27 transform: translate(-50%, -50%) rotate(0deg); 28 } 29 30 50% { 31 transform: translate(-50%, -50%) rotate(10deg); 32 } 33 34 100% { 35 transform: translate(-50%, -50%) rotate(0deg); 36 } 37} 38 39.pokeball { 40 position: absolute; 41 top: 25%; 42 left: 10%; 43 animation: rotate_4991 1s linear infinite; 44} 45 46@keyframes rotate_4991 { 47 0% { 48 transform: rotate(0); 49 } 50 51 100% { 52 transform: rotate(360deg); 53 } 54} 55 56button:hover .pika { 57 top: 90%; 58} 59 60button:hover .pokeball { 61 animation: none; 62 transform: scale(0); 63} 64 65button:hover .go { 66 color: transparent; 67} 68 69.go { 70 position: absolute; 71 top: 18%; 72 left: 45%; 73 font-size: 30px; 74 font-weight: 900; 75 letter-spacing: 1px; 76} 77 78.pword, .pword2 { 79 position: absolute; 80 font-size: 13px; 81 opacity: 0; 82 animation: pulse-animation_0011 1s infinite; 83} 84 85@keyframes pulse-animation_0011 { 86 0% { 87 transform: rotateZ(-30deg) scale(1); 88 } 89 90 50% { 91 transform: rotateZ(-30deg) scale(1.1); 92 } 93 94 100% { 95 transform: rotateZ(-30deg) scale(1); 96 } 97} 98 99.pword { 100 top: 30%; 101 left: 72%; 102} 103 104.pword2 { 105 top: 55%; 106 left: 75%; 107} 108 109button:hover .pword, button:hover .pword2 { 110 opacity: 1; 111} 112
Variation of abutton
Variation of abutton