3.6K views
CSSAdd prefixes
1.button { 2 position: relative; 3 overflow: hidden; 4 height: 3rem; 5 padding: 0 2rem; 6 border-radius: 1.5rem; 7 background: #3d3a4e; 8 background-size: 400%; 9 color: #fff; 10} 11 12.button:hover::before { 13 transform: scaleX(1); 14} 15 16.button-content { 17 position: relative; 18 z-index: 1; 19} 20 21.button::before { 22 content: ''; 23 position: absolute; 24 top: 0; 25 left: 0; 26 transform: scaleX(0); 27 transform-origin: 0 50%; 28 width: 100%; 29 height: inherit; 30 border-radius: inherit; 31 background: linear-gradient( 32 82.3deg, 33 rgba(150, 93, 233, 1) 10.8%, 34 rgba(99, 88, 238, 1) 94.3% 35 ); 36 transition: all 0.475s; 37}
HTML
1<button class="button"> 2 <span class="button-content">Download </span> 3</button>