Button by gharsh11032000
#212121
1.button { 2 position: relative; 3 border: none; 4 color: #e8e8e8; 5 background: #333333; 6 font-weight: 600; 7 font-size: 20px; 8 text-transform: uppercase; 9 height: 60px; 10 padding: 10px; 11 border-radius: 10px; 12 cursor: pointer; 13 box-shadow: 0 10px 20px rgba(0, 0, 0,0.2); 14 transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1); 15 overflow: hidden; 16} 17 18.button .span { 19 position: relative; 20 width: 100%; 21 height: 100%; 22 padding: 10px; 23 display: flex; 24 flex-direction: column; 25 align-items: center; 26 justify-content: center; 27 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 28 transition-delay: 0.6s; 29} 30 31.button:hover .span:nth-child(1) { 32 transform: translateY(-100%); 33 transition-delay: 0s; 34} 35 36.button:hover .span:nth-child(2) { 37 transform: translateY(-100%); 38 transition-delay: 0s; 39} 40 41.button:before { 42 position: absolute; 43 content: ""; 44 width: 100%; 45 height: 100%; 46 top: 0; 47 left: 0; 48 background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% ); 49 transform: scaleX(0); 50 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 51 transition-delay: 0; 52 transform-origin: left; 53} 54 55.button:hover::before { 56 transform: scaleX(1); 57 transition-delay: 0.6s; 58} 59 60.button:active { 61 box-shadow: none; 62} 63 64 65 66
640 views
640 views
MIT License