Card by faxriddin20

1.card {
2  width: fit-content;
3  height: fit-content;
4  background-color: rgb(238, 238, 238);
5  display: flex;
6  align-items: center;
7  justify-content: center;
8  padding: 25px 25px;
9  gap: 20px;
10  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);
11}
12
13/* for all social containers*/
14.socialContainer {
15  width: 52px;
16  height: 52px;
17  border-radius: 5px;
18  background-color: rgb(44, 44, 44);
19  display: flex;
20  align-items: center;
21  justify-content: center;
22  overflow: hidden;
23  transition-duration: 0.3s;
24}
25/* instagram*/
26.containerOne:hover {
27  background-color: #d62976;
28  transition-duration: 0.3s;
29}
30/* twitter*/
31.containerTwo:hover {
32  background-color: #00acee;
33  transition-duration: 0.3s;
34}
35/* linkdin*/
36.containerThree:hover {
37  background-color: #0072b1;
38  transition-duration: 0.3s;
39}
40/* Whatsapp*/
41.containerFour:hover {
42  background-color: green;
43  transition-duration: 0.3s;
44}
45
46.socialContainer:active {
47  transform: scale(0.9);
48  transition-duration: 0.3s;
49}
50
51.socialSvg {
52  width: 17px;
53}
54
55.socialSvg path {
56  fill: rgb(255, 255, 255);
57}
58
59.socialContainer:hover .socialSvg {
60  animation: slide-in-top 0.3s both;
61}
62
63@keyframes slide-in-top {
64  0% {
65    transform: translateY(-50px);
66    opacity: 0;
67  }
68
69  100% {
70    transform: translateY(0);
71    opacity: 1;
72  }
73}
74