Button by gharsh11032000
#212121
1.button { 2 position: relative; 3 padding: 15px 30px; 4 font-family: inherit; 5 background-color: var(--color-primary); 6 border: 2px solid; 7 font-size: 20px; 8 font-weight: 600; 9 color: white; 10 cursor: pointer; 11 text-transform: uppercase; 12 overflow: hidden; 13 transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); 14} 15 16.button:hover span { 17 background: linear-gradient(135deg, #aefb2a 0%, #57ebde 100% ); 18 background-clip: text; 19 -webkit-background-clip: text; 20 -webkit-text-fill-color: transparent; 21} 22 23.button::before { 24 position: absolute; 25 content: ''; 26 width: 100%; 27 height: 100%; 28 left: -110%; 29 top: -0%; 30 background: #aefb2a; 31 pointer-events: none; 32 margin: auto; 33 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 34} 35 36.button:hover { 37 letter-spacing: 2px; 38 border-image: linear-gradient(135deg, #aefb2a 0%, #57ebde 100% ); 39 border-image-slice: 1; 40} 41 42.button:hover::before { 43 left: 110%; 44} 45 46.button:active { 47 scale: 0.95; 48}
816 views
816 views
MIT License