1button {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate(-50%,-50%);
6  padding: 15px 30px;
7  text-transform: uppercase;
8  text-decoration: none;
9  color: #fff;
10  background: black;
11  border: none;
12  letter-spacing: 2px;
13  font-size: 17px;
14}
15
16button:before {
17  content: '';
18  position: absolute;
19  top: 0;
20  left: 0;
21  width: 100%;
22  height: 100%;
23  background: #03a;
24  z-index: -1;
25  transition: transform 0.5s;
26  transform-origin: bottom right;
27  transform: scale(0);
28}
29
30button:hover:before {
31  transition: transform 0.5s;
32  transform-origin: top left;
33  transform: scale(1);
34}
35
36button:after {
37  content: '';
38  position: absolute;
39  top: 0;
40  left: 0;
41  width: 100%;
42  height: 100%;
43  background: transparent;
44  border: 2px solid #fff;
45  box-sizing: border-box;
46  z-index: -1;
47  transition: transform 0.5s;
48  transform-origin: bottom right;
49  transform: scale(1);
50}
51
52button:hover:after {
53  transition: transform 0.5s;
54  transform-origin: top left;
55  transform: scale(0);
56}