Button by mrhyddenn

1button {
2  position: relative;
3  padding: 10px 20px;
4  border-radius: 7px;
5  border: 1px solid rgb(61, 106, 255);
6  font-size: 14px;
7  text-transform: uppercase;
8  font-weight: 600;
9  letter-spacing: 2px;
10  background: transparent;
11  color: #fff;
12  overflow: hidden;
13  box-shadow: 0 0 0 0 transparent;
14  -webkit-transition: all 0.2s ease-in;
15  -moz-transition: all 0.2s ease-in;
16  transition: all 0.2s ease-in;
17}
18
19button:hover {
20  background: rgb(61, 106, 255);
21  box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
22  -webkit-transition: all 0.2s ease-out;
23  -moz-transition: all 0.2s ease-out;
24  transition: all 0.2s ease-out;
25}
26
27button:hover::before {
28  -webkit-animation: sh02 0.5s 0s linear;
29  -moz-animation: sh02 0.5s 0s linear;
30  animation: sh02 0.5s 0s linear;
31}
32
33button::before {
34  content: '';
35  display: block;
36  width: 0px;
37  height: 86%;
38  position: absolute;
39  top: 7%;
40  left: 0%;
41  opacity: 0;
42  background: #fff;
43  box-shadow: 0 0 50px 30px #fff;
44  -webkit-transform: skewX(-20deg);
45  -moz-transform: skewX(-20deg);
46  -ms-transform: skewX(-20deg);
47  -o-transform: skewX(-20deg);
48  transform: skewX(-20deg);
49}
50
51@keyframes sh02 {
52  from {
53    opacity: 0;
54    left: 0%;
55  }
56
57  50% {
58    opacity: 1;
59  }
60
61  to {
62    opacity: 0;
63    left: 100%;
64  }
65}
66
67button:active {
68  box-shadow: 0 0 0 0 transparent;
69  -webkit-transition: box-shadow 0.2s ease-in;
70  -moz-transition: box-shadow 0.2s ease-in;
71  transition: box-shadow 0.2s ease-in;
72}
73