Button by mrhyddenn

1.button {
2  -moz-appearance: none;
3  -webkit-appearance: none;
4  appearance: none;
5  border: none;
6  background: none;
7  color: #0f1923;
8  cursor: pointer;
9  position: relative;
10  padding: 8px;
11  margin-bottom: 20px;
12  text-transform: uppercase;
13  font-weight: bold;
14  font-size: 14px;
15  transition: all .15s ease;
16}
17
18.button::before,
19.button::after {
20  content: '';
21  display: block;
22  position: absolute;
23  right: 0;
24  left: 0;
25  height: calc(50% - 5px);
26  border: 1px solid #7D8082;
27  transition: all .15s ease;
28}
29
30.button::before {
31  top: 0;
32  border-bottom-width: 0;
33}
34
35.button::after {
36  bottom: 0;
37  border-top-width: 0;
38}
39
40.button:active,
41.button:focus {
42  outline: none;
43}
44
45.button:active::before,
46.button:active::after {
47  right: 3px;
48  left: 3px;
49}
50
51.button:active::before {
52  top: 3px;
53}
54
55.button:active::after {
56  bottom: 3px;
57}
58
59.button_lg {
60  position: relative;
61  display: block;
62  padding: 10px 20px;
63  color: #fff;
64  background-color: #0f1923;
65  overflow: hidden;
66  box-shadow: inset 0px 0px 0px 1px transparent;
67}
68
69.button_lg::before {
70  content: '';
71  display: block;
72  position: absolute;
73  top: 0;
74  left: 0;
75  width: 2px;
76  height: 2px;
77  background-color: #0f1923;
78}
79
80.button_lg::after {
81  content: '';
82  display: block;
83  position: absolute;
84  right: 0;
85  bottom: 0;
86  width: 4px;
87  height: 4px;
88  background-color: #0f1923;
89  transition: all .2s ease;
90}
91
92.button_sl {
93  display: block;
94  position: absolute;
95  top: 0;
96  bottom: -1px;
97  left: -8px;
98  width: 0;
99  background-color: #ff4655;
100  transform: skew(-15deg);
101  transition: all .2s ease;
102}
103
104.button_text {
105  position: relative;
106}
107
108.button:hover {
109  color: #0f1923;
110}
111
112.button:hover .button_sl {
113  width: calc(100% + 15px);
114}
115
116.button:hover .button_lg::after {
117  background-color: #fff;
118}
119