Button by doniaskima
#e8e8e8
1.btn-60, 2.btn-60 *, 3.btn-60 :after, 4.btn-60 :before, 5.btn-60:after, 6.btn-60:before { 7 border: 0 solid; 8 box-sizing: border-box; 9} 10 11.btn-60 { 12 -webkit-tap-highlight-color: transparent; 13 -webkit-appearance: button; 14 background-color: #000; 15 background-image: none; 16 color: #fff; 17 cursor: pointer; 18 font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 19 Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 20 Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; 21 font-size: 100%; 22 line-height: 1.5; 23 margin: 0; 24 -webkit-mask-image: -webkit-radial-gradient(#000, #fff); 25 padding: 0; 26} 27 28.btn-60:disabled { 29 cursor: default; 30} 31 32.btn-60:-moz-focusring { 33 outline: auto; 34} 35 36.btn-60 svg { 37 display: block; 38 vertical-align: middle; 39} 40 41.btn-60 [hidden] { 42 display: none; 43} 44 45.btn-60 { 46 background: none; 47 box-sizing: border-box; 48 color: #000; 49 display: block; 50 font-weight: 900; 51 -webkit-mask-image: none; 52 padding: 1.5rem 4rem; 53 position: relative; 54 text-transform: uppercase; 55} 56 57.btn-60 span { 58 background: #fff; 59 border: 1px solid; 60 border-radius: 999px; 61 display: grid; 62 inset: 0; 63 place-items: center; 64 pointer-events: none; 65 position: absolute; 66} 67 68.btn-60:hover span { 69 -webkit-animation: jello 0.8s; 70 animation: jello 0.8s; 71} 72 73@-webkit-keyframes jello { 74 0%, 75 11.1%, 76 to { 77 transform: translateZ(0); 78 } 79 80 22.2% { 81 transform: skewX(-12.5deg) skewY(-12.5deg); 82 } 83 84 33.3% { 85 transform: skewX(6.25deg) skewY(6.25deg); 86 } 87 88 44.4% { 89 transform: skewX(-3.125deg) skewY(-3.125deg); 90 } 91 92 55.5% { 93 transform: skewX(1.5625deg) skewY(1.5625deg); 94 } 95 96 66.6% { 97 transform: skewX(-0.78125deg) skewY(-0.78125deg); 98 } 99 100 77.7% { 101 transform: skewX(0.390625deg) skewY(0.390625deg); 102 } 103 104 88.8% { 105 transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 106 } 107} 108 109@keyframes jello { 110 0%, 111 11.1%, 112 to { 113 transform: translateZ(0); 114 } 115 116 22.2% { 117 transform: skewX(-12.5deg) skewY(-12.5deg); 118 } 119 120 33.3% { 121 transform: skewX(6.25deg) skewY(6.25deg); 122 } 123 124 44.4% { 125 transform: skewX(-3.125deg) skewY(-3.125deg); 126 } 127 128 55.5% { 129 transform: skewX(1.5625deg) skewY(1.5625deg); 130 } 131 132 66.6% { 133 transform: skewX(-0.78125deg) skewY(-0.78125deg); 134 } 135 136 77.7% { 137 transform: skewX(0.390625deg) skewY(0.390625deg); 138 } 139 140 88.8% { 141 transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 142 } 143} 144
354 views
354 views
MIT License