Button by Dashrath-Sharma
This button was created for Button Mastery
#e8e8e8
1.button { 2 box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 15px #444, 3 inset -5px -5px 15px #222; 4} 5 6.button { 7 cursor: pointer; 8 position: relative; 9 font-size: 17px; 10 display: flex; 11 align-items: center; 12 justify-content: center; 13 padding: 1.5em 4.5em; 14 border-radius: 15px; 15 border: none; 16 font-weight: bold; 17 transition: 0.5s; 18 z-index: 1; 19} 20.button:active { 21 transform: scale(0.8); 22} 23.button:active::before { 24 transform: translateY(-10px); 25} 26 27.button > svg { 28 width: 15px; 29 height: 15px; 30 margin-right: 5px; 31} 32 33.button::before, 34.button::after { 35 content: ""; 36 position: absolute; 37 transition: 0.2s; 38 border-radius: 15px; 39 background: rgba(255, 255, 255, 0.1); 40 box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 41 backdrop-filter: blur(2.5px); 42 -webkit-backdrop-filter: blur(2.5px); 43 border: 1px solid rgba(255, 255, 255, 0.58); 44 z-index: -1; 45} 46 47.button::after { 48 width: 90%; 49 height: 68%; 50} 51 52.button::before { 53 width: 99%; 54 height: 90%; 55} 56
67 views
67 views
MIT License