4.5K views
1/* From uiverse.io by @Ali-Tahmazi99 */ 2button { 3 display: inline-block; 4 width: 150px; 5 height: 50px; 6 border-radius: 10px; 7 border: 1px solid #03045e; 8 position: relative; 9 overflow: hidden; 10 transition: all 0.5s ease-in; 11 z-index: 1; 12} 13 14button::before, 15button::after { 16 content: ''; 17 position: absolute; 18 top: 0; 19 width: 0; 20 height: 100%; 21 transform: skew(15deg); 22 transition: all 0.5s; 23 overflow: hidden; 24 z-index: -1; 25} 26 27button::before { 28 left: -10px; 29 background: #240046; 30} 31 32button::after { 33 right: -10px; 34 background: #5a189a; 35} 36 37button:hover::before, 38button:hover::after { 39 width: 58%; 40} 41 42button:hover span { 43 color: #e0aaff; 44 transition: 0.3s; 45} 46 47button span { 48 color: #03045e; 49 font-size: 18px; 50 transition: all 0.3s ease-in; 51}
MIT License