Button by gharsh11032000
#212121
1.button { 2 position: relative; 3 font-size: 24px; 4 font-weight: 600; 5 padding: 15px 30px; 6 color: #cfef00; 7 background-color: transparent; 8 border: 2px solid #cfef00; 9 border-radius: 10px; 10 cursor: pointer; 11 transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); 12 overflow: hidden; 13} 14 15.button::before { 16 content: ''; 17 position: absolute; 18 width: 100%; 19 height: 100%; 20 background: #cfef00; 21 top: 0%; 22 left: -100%; 23 scale: 1; 24 border-radius: inherit; 25 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 26} 27 28.button span { 29 transition: all 0.7s; 30 position: relative; 31 overflow: hidden; 32} 33 34.button span::before { 35 position: absolute; 36 content: 'Hover!'; 37 top: 0; 38 left: 0; 39 color: #212121; 40 width: 0; 41 overflow: hidden; 42} 43 44.button:hover span::before { 45 width: 100%; 46 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 47 transition-delay: 0.4s; 48} 49 50.button:hover::before { 51 scale: 1; 52 top: 0%; 53 left: 0%; 54} 55 56.button:hover { 57 border-color: transparent; 58} 59 60.button:active { 61 scale: 0.9; 62} 63
789 views
789 views
MIT License