Button by gharsh11032000
#212121
1.button { 2 text-decoration: none; 3 color: white; 4 font-weight: 600; 5 font-size: 20px; 6 text-transform: uppercase; 7 letter-spacing: 2px; 8 padding: 15px 30px; 9 display: block; 10 background-color: transparent; 11 border: none; 12 position: relative; 13 cursor: pointer; 14 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 15} 16 17.button span { 18 background: linear-gradient(-45deg, #63A4FF 0%, #83EAF1 100% ); 19 background-clip: text; 20 -webkit-background-clip: text; 21 -webkit-text-fill-color: transparent; 22} 23 24.button:hover span { 25 -webkit-text-fill-color: white; 26} 27 28.button::before { 29 position: absolute; 30 content: ""; 31 top: 0; 32 left: 0; 33 width: 100%; 34 height: 100%; 35 transform: scaleY(2); 36 border: 3px solid; 37 border-image: linear-gradient(-45deg, #63A4FF 0%, #83EAF1 100% ); 38 border-image-slice: 1; 39 border-width: 2px 0 2px 0; 40 opacity: 0; 41 pointer-events: none; 42 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 43 z-index: -1; 44} 45 46.button:hover::before { 47 transform: scaleY(0); 48 opacity: 1; 49} 50 51.button::after { 52 position: absolute; 53 content: ""; 54 top: 0; 55 left: 0; 56 width: 100%; 57 height: 100%; 58 background: linear-gradient(-45deg, #63A4FF 0%, #83EAF1 100% ); 59 transform: scale(0); 60 pointer-events: none; 61 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 62 z-index: -1; 63} 64 65.button:hover::after { 66 transform: scaleY(1); 67} 68 69.button:active { 70 scale: 0.90; 71} 72 73
909 views
909 views
MIT License