#e8e8e8
1button { 2 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 3 font-size: 17px; 4 padding: 1em 2.7em; 5 font-weight: 500; 6 background: #1F2937; 7 color: white; 8 border: none; 9 position: relative; 10 overflow: hidden; 11 border-radius: 0.6em; 12} 13 14.gradient { 15 position: absolute; 16 width: 100%; 17 height: 100%; 18 left: 0; 19 top: 0; 20 border-radius: 0.6em; 21 margin-top: -0.25em; 22 background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)); 23} 24 25.label { 26 position: relative; 27 top: -1px; 28} 29 30.transition { 31 transition-timing-function: cubic-bezier(0, 0, 0.2, 1); 32 transition-duration: 500ms; 33 background-color: rgba(16, 185, 129, 0.6); 34 border-radius: 9999px; 35 width: 0; 36 height: 0; 37 position: absolute; 38 left: 50%; 39 top: 50%; 40 transform: translate(-50%, -50%); 41} 42 43button:hover .transition { 44 width: 14em; 45 height: 14em; 46} 47 48button:active { 49 transform: scale(0.97); 50}
10K views
10K views
Comments
MIT License