Button by TroyRandall

1.edit-post {
2  position: relative;
3  background: #ffffff;
4  color: #000;
5  padding: 15px;
6  margin: 10px;
7  border-radius: 10px;
8  width: 40px;
9  height: 40px;
10  font-size: 17px;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  flex-direction: column;
15  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
16  cursor: pointer;
17  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
18}
19
20.edit-tooltip {
21  position: absolute;
22  top: 0px;
23  font-size: 14px;
24  background: #ffffff;
25  color: #ffffff;
26  padding: 5px 8px;
27  border-radius: 5px;
28  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
29  opacity: 0;
30  pointer-events: none;
31  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
32  width: 150px;
33}
34
35.edit-tooltip::before {
36  position: absolute;
37  content: "";
38  height: 8px;
39  width: 8px;
40  background: #ffffff;
41  bottom: -3px;
42  left: 50%;
43  transform: translate(-50%) rotate(45deg);
44  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
45}
46
47.edit-post:hover .edit-tooltip {
48  top: -45px;
49  opacity: 1;
50  visibility: visible;
51  pointer-events: auto;
52}
53
54.edit-icon {
55  font-size: 24px;
56}
57
58.edit-post:hover,
59.edit-post:hover .edit-tooltip,
60.edit-post:hover .edit-tooltip::before {
61  background: linear-gradient(320deg, rgb(3, 77, 146), rgb(0, 60, 255));
62  color: #ffffff;
63}