Button by Madflows
#212121
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 border: none; 11 cursor: pointer; 12} 13 14.button:hover::before { 15 transform: scaleX(1); 16} 17 18.button-content { 19 position: relative; 20 z-index: 1; 21} 22 23.button::before { 24 content: ""; 25 position: absolute; 26 top: 0; 27 left: 0; 28 transform: scaleX(0); 29 transform-origin: 0 50%; 30 width: 100%; 31 height: inherit; 32 border-radius: inherit; 33 background: linear-gradient( 34 82.3deg, 35 rgba(150, 93, 233, 1) 10.8%, 36 rgba(99, 88, 238, 1) 94.3% 37 ); 38 transition: all 0.475s; 39} 40
19K views
19K views
Variations
1 MIT License