Button by cssbuttons-io
#e8e8e8
1button { 2 font-size: 18px; 3 background-color: #008542; 4 color: #fff; 5 text-shadow: 0 2px 0 rgb(0 0 0 / 25%); 6 display: inline-flex; 7 align-items: center; 8 justify-content: center; 9 position: relative; 10 border: 0; 11 z-index: 1; 12 user-select: none; 13 cursor: pointer; 14 text-transform: uppercase; 15 letter-spacing: 1px; 16 white-space: unset; 17 padding: 0.8rem 1.5rem; 18 text-decoration: none; 19 font-weight: 900; 20 transition: all 0.7s cubic-bezier(0, 0.8, 0.26, 0.99); 21} 22 23button:before { 24 position: absolute; 25 pointer-events: none; 26 top: 0; 27 left: 0; 28 display: block; 29 width: 100%; 30 height: 100%; 31 content: ""; 32 transition: 0.7s cubic-bezier(0, 0.8, 0.26, 0.99); 33 z-index: -1; 34 background-color: #008542 !important; 35 box-shadow: 0 -4px rgb(21 108 0 / 50%) inset, 36 0 4px rgb(100 253 31 / 99%) inset, -4px 0 rgb(100 253 31 / 50%) inset, 37 4px 0 rgb(21 108 0 / 50%) inset; 38} 39 40button:after { 41 position: absolute; 42 pointer-events: none; 43 top: 0; 44 left: 0; 45 display: block; 46 width: 100%; 47 height: 100%; 48 content: ""; 49 box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%); 50 transition: 0.7s cubic-bezier(0, 0.8, 0.26, 0.99); 51} 52 53button:hover:before { 54 box-shadow: 0 -4px rgb(0 0 0 / 50%) inset, 0 4px rgb(255 255 255 / 20%) inset, 55 -4px 0 rgb(255 255 255 / 20%) inset, 4px 0 rgb(0 0 0 / 50%) inset; 56} 57 58button:hover:after { 59 box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%); 60} 61 62button:active { 63 transform: translateY(4px); 64} 65 66button:active:after { 67 box-shadow: 0 0px 0 0 rgb(0 0 0 / 15%); 68} 69
7.5K views
7.5K views
Variations
1 MIT License