Button by Rodrypaladin

1.button {
2  background-image: linear-gradient(to right bottom, #e300ff, #ff00aa, #ff5956, #ffb900, #fffe00);
3  border: none;
4  font-size: 1.2em;
5  border-radius: 1.5em;
6  padding: 4px;
7  transition: border-top-left-radius 0.2s ease-in, 
8  border-top-right-radius 0.2s ease-in 0.15s, 
9  border-bottom-right-radius 0.2s ease-in 0.3s,
10  border-bottom-left-radius 0.2s ease-in 0.45s, 
11  padding 0.2s ease-in;
12  position: relative;
13}
14
15.button__int {
16  background-color: #212121;
17  color: white;
18  border-radius: 1.3em;
19  padding: 10px 40px;
20  transition: all 0.2s ease-in,
21  border-top-left-radius 0.2s ease-in, 
22  border-top-right-radius 0.2s ease-in 0.15s, 
23  border-bottom-right-radius 0.2s ease-in 0.3s,
24  border-bottom-left-radius 0.2s ease-in 0.45s,
25  padding 0.2s ease-in;
26  font-weight: 600;
27  z-index: -1;
28  box-shadow: -15px -10px 30px -5px rgba(225, 0, 255, 0.8),
29    15px -10px 30px -5px rgba(255, 0, 212, 0.8),
30    15px 10px 30px -5px rgba(255, 174, 0, 0.8),
31    -15px 10px 30px -5px rgba(255, 230, 0.8);
32}
33
34.button:active .button__int {
35  padding: 10px 30px;
36}
37
38.button:hover {
39  border-radius: 0;
40}
41
42.button:hover .button__int {
43  border-radius: 0;
44}
45
46.button:hover .button__int {
47  box-shadow: -25px -10px 30px -5px rgba(225, 0, 255, 0.7),
48    25px -10px 30px -5px rgba(255, 0, 212, 0.7),
49    25px 10px 30px -5px rgba(255, 174, 0, 0.7),
50    -25px 10px 30px -5px rgba(255, 230, 0, 0.7);
51}
52