button animation css codepen

1<div class="main-container">
2    <button class="button">Hover over</button>
3</div>
4<style>
5* {
6  margin: 0;
7  padding: 0;
8  box-sizing: content-box;
9}
10
11html,
12body {  
13    width: 100%;
14    height: 100%;
15} 
16
17.main-container {
18    width: 100%;
19    height: 100%;
20    display: flex;
21    justify-content: center;
22    align-items: center;
23    background-color: #111111;
24    color: #ffffff;
25}
26
27.button {
28  position: relative;
29  background-color: transparent;
30  padding: 10px 20px;
31  color: #ffffff;
32  border: none;
33  font-size: 1.9em;
34  transform: none;
35  cursor: pointer;
36}
37
38.button:after {
39  content: "";
40  height: 100%;
41  width: calc(100% + 20px);
42  position: absolute;
43  top: -2px;
44  left: -10px;
45  border-top: 2px solid #fff;
46  border-bottom: 2px solid #fff;
47  transition: 1s;
48}
49
50.button:before {
51  content:"";
52  height: calc(100% + 20px);
53  width: 100%;
54  position: absolute; 
55  top: -10px;
56  left: -2px;
57  border-left: 2px solid #fff;
58  border-right: 2px solid #fff;
59  transition: 1s;
60}
61
62.button:hover:before {
63  transform: rotateY(180deg);
64}
65
66.button:hover:after {
67  transform: rotateX(180deg);
68}
69</style>