Button by xueyuantan

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}