Button by Juanes200122

1/* tooltip settings 👇 */
2
3.copy {
4  /* button */
5  --button-bg: #ffffff;
6  --button-hover-bg: #464646;
7  --button-text-color: #474747;
8  --button-hover-text-color: #8bb9fe;
9  --button-border-radius: 10px;
10  --button-diameter: 36px;
11  --button-outline-width: 1px;
12  --button-outline-color: rgb(141, 141, 141);
13  /* tooltip */
14  --tooltip-bg: #f4f3f3;
15  --toolptip-border-radius: 4px;
16  --tooltip-font-family: Menlo, Roboto Mono, monospace;
17  /* 👆 this field should not be empty */
18  --tooltip-font-size: 12px;
19  /* 👆 this field should not be empty */
20  --tootip-text-color: rgb(50, 50, 50);
21  --tooltip-padding-x: 7px;
22  --tooltip-padding-y: 7px;
23  --tooltip-offset: 8px;
24  /* --tooltip-transition-duration: 0.3s; */
25  /* 👆 if you need a transition, 
26  just remove the comment,
27  but I didn't like the transition :| */
28}
29
30.copy {
31  box-sizing: border-box;
32  width: var(--button-diameter);
33  height: var(--button-diameter);
34  border-radius: var(--button-border-radius);
35  background-color: var(--button-bg);
36  color: var(--button-text-color);
37  border: none;
38  cursor: pointer;
39  position: relative;
40  outline: none;
41}
42
43.tooltip {
44  position: absolute;
45  opacity: 0;
46  visibility: 0;
47  top: 0;
48  left: 50%;
49  transform: translateX(-50%);
50  white-space: nowrap;
51  font: var(--tooltip-font-size) var(--tooltip-font-family);
52  color: var(--tootip-text-color);
53  background: var(--tooltip-bg);
54  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
55  border-radius: var(--toolptip-border-radius);
56  pointer-events: none;
57  transition: all var(--tooltip-transition-duration)
58    cubic-bezier(0.68, -0.55, 0.265, 1.55);
59}
60
61.tooltip::before {
62  content: attr(data-text-initial);
63}
64
65.tooltip::after {
66  content: "";
67  position: absolute;
68  bottom: calc(var(--tooltip-padding-y) / 2 * -1);
69  width: var(--tooltip-padding-y);
70  height: var(--tooltip-padding-y);
71  background: inherit;
72  left: 50%;
73  transform: translateX(-50%) rotate(45deg);
74  z-index: -999;
75  pointer-events: none;
76}
77
78.copy svg {
79  position: absolute;
80  top: 50%;
81  left: 50%;
82  transform: translate(-50%, -50%);
83}
84
85.checkmark {
86  display: none;
87}
88
89/* actions */
90
91.copy:hover .tooltip,
92.copy:focus:not(:focus-visible) .tooltip {
93  opacity: 1;
94  visibility: visible;
95  top: calc((100% + var(--tooltip-offset)) * -1);
96}
97
98.copy:focus:not(:focus-visible) .tooltip::before {
99  content: attr(data-text-end);
100}
101
102.copy:focus:not(:focus-visible) .clipboard {
103  display: none;
104}
105
106.copy:focus:not(:focus-visible) .checkmark {
107  display: block;
108}
109
110.copy:hover,
111.copy:focus {
112  background-color: var(--button-hover-bg);
113}
114
115.copy:active {
116  outline: var(--button-outline-width) solid var(--button-outline-color);
117}
118
119.copy:hover svg {
120  color: var(--button-hover-text-color);
121}
122