Button by Dashrath-Sharma

1button {
2  color: red;
3  outline: none;
4  border: none;
5  font-size: 17px;
6  padding: 1em 2em;
7  position: relative;
8  background: none;
9  cursor: pointer;
10}
11
12button:active {
13  transform: scale(.98);
14  box-shadow: .1px .1px 2px red;
15}
16
17button span {
18  position: absolute;
19  background: red;
20  transition: .5s;
21  box-shadow: 1px 1px 20px red;
22}
23
24button span:nth-child(1) {
25  top: 0;
26  left: 0;
27  width: 3px;
28  height: 30%;
29}
30
31button:hover span:nth-child(1) {
32  height: 100%;
33}
34
35button span:nth-child(2) {
36  top: 0;
37  left: 0;
38  width: 15%;
39  height: 3px;
40}
41
42button:hover span:nth-child(2) {
43  width: 100%;
44}
45
46button span:nth-child(3) {
47  bottom: 0;
48  right: 0;
49  width: 3px;
50  height: 30%;
51}
52
53button:hover span:nth-child(3) {
54  height: 100%;
55}
56
57button span:nth-child(4) {
58  bottom: 0;
59  right: 0;
60  width: 15%;
61  height: 3px;
62}
63
64button:hover span:nth-child(4) {
65  width: 100%;
66}