Button by sahilxkhadka
#e8e8e8
1.button { 2 outline: none; 3 border: none; 4 display: flex; 5 width: 400px; 6 justify-content: center; 7 flex-wrap: wrap; 8 background-color: transparent; 9} 10.button div:first-child { 11 width: 100%; 12 display: flex; 13 justify-content: center; 14} 15.button span { 16 cursor: pointer; 17 position: relative; 18 height: 80px; 19 width: 80px; 20 padding: 8px 15px; 21 margin: 8px 4px; 22 display: inline-block; 23 border-radius: 10px; 24 background: linear-gradient(180deg, #282828, #202020); 25 box-shadow: inset -8px 0 8px rgba(0, 0, 0, 0.15), 26 inset 0 -8px 8px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(0, 0, 0, 0.75), 27 10px 20px 25px rgba(0, 0, 0, 0.4); 28 overflow: hidden; 29} 30.button span::before { 31 content: ""; 32 position: absolute; 33 top: 3px; 34 left: 4px; 35 bottom: 14px; 36 right: 12px; 37 background: linear-gradient(90deg, #232323, #4a4a4a); 38 border-radius: 10px; 39 box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.25), 40 10px 5px 10px rgba(0, 0, 0, 0.15); 41 border-left: 1px solid #0004; 42 border-bottom: 1px solid #0004; 43 border-top: 1px solid #0009; 44} 45.button span i { 46 font-family: "Montserrat", sans-serif; 47 position: relative; 48 font-style: normal; 49 font-size: 1.5rem; 50 text-transform: uppercase; 51 color: white; 52} 53
199 views
199 views
MIT License