Button by doniaskima
#e8e8e8
1.btn-96, 2.btn-96 *, 3.btn-96 :after, 4.btn-96 :before, 5.btn-96:after, 6.btn-96:before { 7 border: 0 solid; 8 box-sizing: border-box; 9} 10 11.btn-96 { 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-96:disabled { 29 cursor: default; 30} 31 32.btn-96:-moz-focusring { 33 outline: auto; 34} 35 36.btn-96 svg { 37 display: block; 38 vertical-align: middle; 39} 40 41.btn-96 [hidden] { 42 display: none; 43} 44 45.btn-96 { 46 box-sizing: border-box; 47 display: block; 48 font-weight: 900; 49 -webkit-mask-image: none; 50 padding: 2rem 5rem; 51 perspective: 800px; 52 position: relative; 53 text-transform: uppercase; 54 transform-style: preserve-3d; 55} 56 57.btn-96 span { 58 background: #fff; 59 color: #000; 60 display: grid; 61 inset: 0; 62 place-items: center; 63 position: absolute; 64 transform: rotateX(0deg); 65 transform-origin: top center; 66 transition: 0.2s; 67} 68 69.btn-96:hover span { 70 transform: rotateX(35deg); 71} 72 73.btn-96:after, 74.btn-96:before { 75 background: #ddd; 76 content: ""; 77 height: 100%; 78 left: 0; 79 position: absolute; 80 top: 0; 81 transform: rotateX(0deg); 82 width: 100%; 83 z-index: -1; 84} 85 86.btn-96:after { 87 background: #ccc; 88 width: 0; 89} 90 91.btn-96:hover:after { 92 -webkit-animation: progress-bar 1.2s; 93 animation: progress-bar 1.2s; 94} 95 96@-webkit-keyframes progress-bar { 97 0% { 98 opacity: 1; 99 width: 0; 100 } 101 102 10% { 103 opacity: 1; 104 width: 15%; 105 } 106 107 25% { 108 opacity: 1; 109 width: 25%; 110 } 111 112 40% { 113 opacity: 1; 114 width: 35%; 115 } 116 117 55% { 118 opacity: 1; 119 width: 75%; 120 } 121 122 60% { 123 opacity: 1; 124 width: 100%; 125 } 126 127 to { 128 opacity: 0; 129 width: 100%; 130 } 131} 132 133@keyframes progress-bar { 134 0% { 135 opacity: 1; 136 width: 0; 137 } 138 139 10% { 140 opacity: 1; 141 width: 15%; 142 } 143 144 25% { 145 opacity: 1; 146 width: 25%; 147 } 148 149 40% { 150 opacity: 1; 151 width: 35%; 152 } 153 154 55% { 155 opacity: 1; 156 width: 75%; 157 } 158 159 60% { 160 opacity: 1; 161 width: 100%; 162 } 163 164 to { 165 opacity: 0; 166 width: 100%; 167 } 168} 169
2.3K views
2.3K views
MIT License