Button by ferlagher

1button {
2  position: relative;
3  font-size: 1.2em;
4  padding: 0.7em 1.4em;
5  background-color: #BF0426;
6  text-decoration: none;
7  border: none;
8  border-radius: 0.5em;
9  color: #DEDEDE;
10  box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3);
11}
12
13button::before {
14  position: absolute;
15  content: '';
16  height: 0;
17  width: 0;
18  top: 0;
19  left: 0;
20  background: linear-gradient(135deg, rgba(33,33,33,1) 0%, rgba(33,33,33,1) 50%, rgba(150,4,31,1) 50%, rgba(191,4,38,1) 60%);
21  border-radius: 0 0 0.5em 0;
22  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
23  transition: 0.3s;
24}
25
26button:hover::before {
27  width: 1.6em;
28  height: 1.6em;
29}
30
31button:active {
32  box-shadow: 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.3);
33  transform: translate(0.1em, 0.1em);
34}