1.button {
2  display: inline-block;
3  padding: 12px 28px;
4  margin: 10px;
5  font-size: 24px;
6  font-weight: bold;
7  text-transform: uppercase;
8  color: #fff;
9  background-image: linear-gradient(to bottom right, #00c6ff, #0072ff);
10  border: none;
11  border-radius: 40px;
12  box-shadow: 0px 4px 0px #0072ff;
13  transition: all 0.2s ease-in-out;
14}
15
16.button:hover {
17  transform: translateY(-2px);
18  box-shadow: 0px 6px 0px #0072ff;
19}
20
21.button:active {
22  transform: translateY(0px);
23  box-shadow: none;
24  background-image: linear-gradient(to bottom right, #0072ff, #00c6ff);
25}
26
27.button:before,
28.button:after {
29  content: "";
30  position: absolute;
31  width: 0;
32  height: 0;
33}
34
35.button:before {
36  top: -3px;
37  left: -3px;
38  border-radius: 40px;
39  border-top: 3px solid #fff;
40  border-left: 3px solid #fff;
41}
42
43.button:after {
44  bottom: -3px;
45  right: -3px;
46  border-radius: 40px;
47  border-bottom: 3px solid #fff;
48  border-right: 3px solid #fff;
49}
50
51