1.custom-btn {
2  width: 130px;
3  height: 40px;
4  color: #fff;
5  border-radius: 5px;
6  padding: 10px 25px;
7  font-family: 'Lato', sans-serif;
8  font-weight: 500;
9  background: transparent;
10  cursor: pointer;
11  transition: all 0.3s ease;
12  position: relative;
13  display: inline-block;
14  box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),
15   7px 7px 20px 0px rgba(0,0,0,.1),
16   4px 4px 5px 0px rgba(0,0,0,.1);
17  outline: none;
18  font-size: 15px;
19}
20
21.btn-4 {
22  background-color: #004dff;
23  background-image: linear-gradient(315deg, #03c8a8 0%, #004dff 74%);
24  line-height: 42px;
25  padding: 0;
26  border: none;
27}
28
29.btn-4:hover {
30  background-color: #004dff;
31  background-image: linear-gradient(315deg, #004dff 0%, #03c8a8 74%);
32}
33
34.btn-4 span {
35  position: relative;
36  display: block;
37  width: 100%;
38  height: 100%;
39}
40
41.btn-4:before,
42.btn-4:after {
43  position: absolute;
44  content: "";
45  right: 0;
46  top: 0;
47  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9),
48              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
49    inset -4px -4px 6px 0 rgba(255,255,255,.9),
50    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
51  transition: all 0.3s ease;
52}
53
54.btn-4:before {
55  height: 0%;
56  width: .1px;
57}
58
59.btn-4:after {
60  width: 0%;
61  height: .1px;
62}
63
64.btn-4:hover:before {
65  height: 100%;
66}
67
68.btn-4:hover:after {
69  width: 100%;
70}
71
72.btn-4 span:before,
73.btn-4 span:after {
74  position: absolute;
75  content: "";
76  left: 0;
77  bottom: 0;
78  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9),
79              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
80    inset -4px -4px 6px 0 rgba(255,255,255,.9),
81    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
82  transition: all 0.3s ease;
83}
84
85.btn-4 span:before {
86  width: .1px;
87  height: 0%;
88}
89
90.btn-4 span:after {
91  width: 0%;
92  height: .1px;
93}
94
95.btn-4 span:hover:before {
96  height: 100%;
97}
98
99.btn-4 span:hover:after {
100  width: 100%;
101}