1.card svg {
2  height: 25px;
3}
4
5.card {
6  position: relative;
7  display: flex;
8  align-items: center;
9  justify-content: center;
10  background: #e7e7e7;
11  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
12  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
13  overflow: hidden;
14  height: 50px;
15  width: 200px;
16}
17
18.card::before, .card::after {
19  position: absolute;
20  display: flex;
21  align-items: center;
22  width: 50%;
23  height: 100%;
24  transition: 0.25s linear;
25  z-index: 1;
26}
27
28.card::before {
29  content: "";
30  left: 0;
31  justify-content: flex-end;
32  background-color: #4d60b6;
33}
34
35.card::after {
36  content: "";
37  right: 0;
38  justify-content: flex-start;
39  background-color: #4453a6;
40}
41
42.card:hover {
43  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
44}
45
46.card:hover span {
47  opacity: 0;
48  z-index: -3;
49}
50
51.card:hover::before {
52  opacity: 0.5;
53  transform: translateY(-100%);
54}
55
56.card:hover::after {
57  opacity: 0.5;
58  transform: translateY(100%);
59}
60
61.card span {
62  position: absolute;
63  display: flex;
64  align-items: center;
65  justify-content: center;
66  width: 100%;
67  height: 100%;
68  color: whitesmoke;
69  font-family: 'Fira Mono', monospace;
70  font-size: 24px;
71  font-weight: 700;
72  opacity: 1;
73  transition: opacity 0.25s;
74  z-index: 2;
75}
76
77.card .social-link {
78  position: relative;
79  display: flex;
80  align-items: center;
81  justify-content: center;
82  width: 25%;
83  height: 100%;
84  color: whitesmoke;
85  font-size: 24px;
86  text-decoration: none;
87  transition: 0.25s;
88}
89
90.card .social-link svg {
91  text-shadow: 1px 1px rgba(31, 74, 121, 0.7);
92  transform: scale(1);
93}
94
95.card .social-link:hover {
96  background-color: rgba(249, 244, 255, 0.774);
97  animation: bounce_613 0.4s linear;
98}
99
100@keyframes bounce_613 {
101  40% {
102    transform: scale(1.4);
103  }
104
105  60% {
106    transform: scale(0.8);
107  }
108
109  80% {
110    transform: scale(1.2);
111  }
112
113  100% {
114    transform: scale(1);
115  }
116}