Card by ahmed150up

1.card {
2  display: flex;
3  height: 70px;
4  width: 270px;
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  cursor: pointer;
18}
19
20.card .social-link1,.card .social-link2,.card .social-link3,.card .social-link4 {
21  position: relative;
22  display: flex;
23  align-items: center;
24  justify-content: center;
25  width: 25%;
26  color: whitesmoke;
27  font-size: 24px;
28  text-decoration: none;
29  transition: 0.25s;
30  border-radius: 50px;
31}
32
33.card svg {
34  transform: scale(1);
35}
36
37.card .social-link1:hover {
38  background: #f09433;
39  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
40  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
41  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
42  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
43  animation: bounce_613 0.4s linear;
44}
45
46.card .social-link2:hover {
47  background-color: #00ccff;
48  animation: bounce_613 0.4s linear;
49}
50
51.card .social-link3:hover {
52  background-color: #5865f2;
53  animation: bounce_613 0.4s linear;
54}
55
56.card .social-link4:hover {
57  background-color: #12a50b;
58  animation: bounce_613 0.4s linear;
59}
60
61@keyframes bounce_613 {
62  40% {
63    transform: scale(1.4);
64  }
65
66  60% {
67    transform: scale(0.8);
68  }
69
70  80% {
71    transform: scale(1.2);
72  }
73
74  100% {
75    transform: scale(1);
76  }
77}