Button by david-mohseni

1.wrapper {
2  display: inline-flex;
3  list-style: none;
4  height: 120px;
5  width: 100%;
6  padding-top: 40px;
7  font-family: "Poppins", sans-serif;
8  justify-content: center;
9}
10
11.wrapper .icon {
12  position: relative;
13  background: #fff;
14  border-radius: 50%;
15  margin: 10px;
16  width: 50px;
17  height: 50px;
18  font-size: 18px;
19  display: flex;
20  justify-content: center;
21  align-items: center;
22  flex-direction: column;
23  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
24  cursor: pointer;
25  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
26}
27
28.wrapper .tooltip {
29  position: absolute;
30  top: 0;
31  font-size: 14px;
32  background: #fff;
33  color: #fff;
34  padding: 5px 8px;
35  border-radius: 5px;
36  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
37  opacity: 0;
38  pointer-events: none;
39  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
40}
41
42.wrapper .tooltip::before {
43  position: absolute;
44  content: "";
45  height: 8px;
46  width: 8px;
47  background: #fff;
48  bottom: -3px;
49  left: 50%;
50  transform: translate(-50%) rotate(45deg);
51  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
52}
53
54.wrapper .icon:hover .tooltip {
55  top: -45px;
56  opacity: 1;
57  visibility: visible;
58  pointer-events: auto;
59}
60
61.wrapper .icon:hover span,
62.wrapper .icon:hover .tooltip {
63  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
64}
65
66.wrapper .facebook:hover,
67.wrapper .facebook:hover .tooltip,
68.wrapper .facebook:hover .tooltip::before {
69  background: #1877f2;
70  color: #fff;
71}
72
73.wrapper .twitter:hover,
74.wrapper .twitter:hover .tooltip,
75.wrapper .twitter:hover .tooltip::before {
76  background: #1da1f2;
77  color: #fff;
78}
79
80.wrapper .instagram:hover,
81.wrapper .instagram:hover .tooltip,
82.wrapper .instagram:hover .tooltip::before {
83  background: #e4405f;
84  color: #fff;
85}
86