Button by mi-series

1.container {
2  border: none;
3}
4
5.container .card {
6  background-color: white;
7  border-radius: 10px;
8  border: 1px solid black;
9  position: relative;
10  z-index: 0;
11  transition: all 300ms ease-out;
12  transform-origin: center center;
13  width: 150px;
14  height: 50px;
15  box-shadow: 0px;
16  outline: none;
17}
18
19.card-header {
20  padding: 10px;
21  background: linear-gradient(90deg, #CB2D6F 20px, transparent 100%) center / 22px 22px,
22		linear-gradient(#CB2D6F 20px, transparent 100%) center / 22px 22px,
23		#fff;
24  color: white;
25  height: 100%;
26  font-size: 20px;
27  font-weight: 600;
28  border: 1px solid white;
29  border-radius: 10px;
30}
31
32.container .card .border {
33  transition: all 300ms ease-out;
34  transform-origin: center center;
35  position: absolute;
36  top: 6px;
37  left: 6px;
38  width: calc(100% - 0px);
39  height: calc(100% - 0px);
40  border: 1px solid black;
41  border-radius: 9px;
42}
43
44.container a {
45  opacity: 0;
46  position: absolute;
47  z-index: 1;
48  width: 50%;
49  height: 50%;
50}
51
52.container a:hover,
53.container a:focus {
54  transform: translateZ(50px);
55}
56
57.container a:hover ~ .card .card-header,
58.container a:focus ~ .card .card-header {
59  transform: translateZ(24px);
60}
61
62.container a:nth-child(1) {
63  top: 0;
64  left: 0;
65}
66
67.container a:nth-child(1):hover ~ .card,
68.container a:nth-child(1):focus ~ .card {
69  transform: rotateX(10deg) rotateY(-10deg) translateZ(0);
70  transform-origin: right bottom;
71  box-shadow: 10px 20px;
72}
73
74.container a:nth-child(2) {
75  top: 0;
76  right: 0;
77}
78
79.container a:nth-child(2):hover ~ .card,
80.container a:nth-child(2):focus ~ .card {
81  transform: rotateX(10deg) rotateY(10deg) translateZ(0);
82  transform-origin: left bottom;
83  box-shadow: -10px 20px;
84}
85
86.container a:nth-child(3) {
87  bottom: 0;
88  right: 0;
89}
90
91.container a:nth-child(3):hover ~ .card ,
92.container a:nth-child(3):focus ~ .card {
93  transform-origin: left top;
94  transform: rotateX(-10deg) rotateY(10deg) translateZ(0);
95  box-shadow: -10px -20px;
96}
97
98.container a:nth-child(4) {
99  bottom: 0;
100  left: 0;
101}
102
103.container a:nth-child(4):hover ~ .card,
104.container a:nth-child(4):focus ~ .card {
105  transform-origin: right top;
106  transform: rotateX(-10deg) rotateY(-10deg) translateZ(0);
107  box-shadow: 10px -20px;
108}