Card by Valeron-T

1.card {
2  display: flex;
3  height: 70px;
4  width: 350px;
5}
6
7.card svg {
8  position: absolute;
9  display: flex;
10  width: 60%;
11  height: 100%;
12  font-size: 24px;
13  font-weight: 700;
14  opacity: 1;
15  transition: opacity 0.25s;
16  z-index: 2;
17  padding: 0.25rem;
18  cursor: pointer;
19}
20
21.card .social-link1,.card .social-link2,.card .social-link3,.card .social-link4,.card .social-link5 {
22  position: relative;
23  display: flex;
24  align-items: center;
25  justify-content: center;
26  width: 25%;
27  color: whitesmoke;
28  font-size: 24px;
29  text-decoration: none;
30  transition: 0.25s;
31  border-radius: 50px;
32}
33
34.card svg {
35  transform: scale(1);
36}
37
38.card .social-link1:hover {
39  background: #f09433;
40  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
41  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
42  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
43  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
44  animation: bounce_613 0.4s linear;
45}
46
47.card .social-link2:hover {
48  background-color: #242c34;
49  animation: bounce_613 0.4s linear;
50}
51
52.card .social-link3:hover {
53  background-color: #5865f2;
54  animation: bounce_613 0.4s linear;
55}
56
57.card .social-link4:hover {
58  background-color: #0a66c2;
59  animation: bounce_613 0.4s linear;
60}
61
62.card .social-link5:hover {
63  background-color: #ff8000;
64  animation: bounce_613 0.4s linear;
65}
66
67@keyframes bounce_613 {
68  40% {
69    transform: scale(1.4);
70  }
71
72  60% {
73    transform: scale(0.8);
74  }
75
76  80% {
77    transform: scale(1.2);
78  }
79
80  100% {
81    transform: scale(1);
82  }
83}