Button by gharsh11032000
#212121
1.button { 2 position: relative; 3 display: flex; 4 align-items: center; 5 justify-content: center; 6 color: #e8e8e8; 7 background-color: #212121; 8 width: 70px; 9 height: 70px; 10 font-size: 24px; 11 text-transform: uppercase; 12 border: 2px solid #212121; 13 border-radius: 10px; 14 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 15 box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.15), 16 2px 2px 2px rgba(0, 0, 0, 0.1), 17 -3px -3px 2px rgba(255, 255, 255, 0.05), 18 -2px -2px 1px rgba(255, 255, 255, 0.05); 19 overflow: hidden; 20 cursor: pointer; 21} 22 23.button .span { 24 position: relative; 25 z-index: 2; 26 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 27} 28 29.button::before { 30 content: ""; 31 position: absolute; 32 background-color: #e8e8e8; 33 width: 100%; 34 height: 100%; 35 left: 0%; 36 bottom: 0%; 37 transform: translate(-100%, 100%); 38 border-radius: 10px; 39 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 40} 41 42.button:hover::before { 43 transform: translate(0,0); 44 transition-delay: 0.4s; 45} 46 47.button:hover .span { 48 scale: 1.2; 49} 50 51.button:hover { 52 box-shadow: none; 53} 54 55.button:active { 56 scale: 0.95; 57} 58 59 60
Â
1.1K views
Variation of abutton
MIT License