#e8e8e8
1button { 2 width: 9em; 3 height: 3em; 4 border-radius: 30em; 5 font-size: 15px; 6 font-family: inherit; 7 border: none; 8 position: relative; 9 overflow: hidden; 10 z-index: 1; 11 box-shadow: 6px 6px 12px #c5c5c5, 12 -6px -6px 12px #ffffff; 13} 14 15button::before { 16 content: ''; 17 width: 0; 18 height: 3em; 19 border-radius: 30em; 20 position: absolute; 21 top: 0; 22 left: 0; 23 background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%); 24 transition: .5s ease; 25 display: block; 26 z-index: -1; 27} 28 29button:hover::before { 30 width: 9em; 31}
Comments
MIT License