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