Button by asgardOP
This button was created for Button Mastery Vol. 2
#e8e8e8
1.button { 2 width: 170px; 3 height: 55px; 4 border-radius: 10px; 5 border: 1px solid gray; 6 border-bottom: 2px solid rgb(77, 77, 77); 7 display: flex; 8 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.349); 9 align-items: center; 10 justify-content: center; 11 cursor: pointer; 12 position: relative; 13 transition: 0.4s; 14 background: linear-gradient(140deg, white, rgb(214, 214, 214)); 15} 16 17.button:hover { 18 box-shadow: none; 19 transform: scaleY(0.6); 20 border-bottom: 2px solid rgb(77, 77, 77); 21 background: linear-gradient(160deg, white, rgb(214, 214, 214)); 22} 23 24.button:active { 25 margin-top: 20px; 26 transition: 0.05s; 27} 28 29.button::before { 30 content: ""; 31 position: absolute; 32 left: -1px; 33 bottom: 0px; 34 width: 170px; 35 height: 0px; 36 background: rgb(194, 194, 194); 37 border-top: 0px solid black; 38 border-bottom: 0px solid black; 39 transition: height 0.4s, bottom 0.4s, opacity 0s 0.35s; 40 opacity: 0; 41 box-shadow: inset 0px -10px 10px rgba(167, 167, 167, 0.719); 42 border-bottom-left-radius: 5px; 43 border-bottom-right-radius: 5px; 44} 45 46.button:hover::before { 47 height: 35px; 48 bottom: -27px; 49 opacity: 1; 50 border-bottom: 1px solid black; 51 transition: height 0.4s, bottom 0.4s; 52} 53 54.button:active::before { 55 height: 18px; 56 bottom: -9px; 57 transition: height 0.05s, bottom 0.05s, opacity 0s 0s; 58} 59 60.button div { 61 width: 150px; 62 height: 40px; 63 background: linear-gradient(180deg, rgba(212, 212, 212, 0.925), white); 64 display: flex; 65 align-items: center; 66 justify-content: center; 67 border-radius: 20px; 68 font-weight: 900; 69} 70 71.button div svg { 72 width: 20px; 73 transform: rotate(40deg); 74 margin-right: 5px; 75} 76
59 views
59 views
MIT License