Button by Galahhad

1/* tooltip settings 👇 */
2
3.copy {
4  /* button */
5  --button-bg: #353434;
6  --button-hover-bg: #464646;
7  --button-text-color: #CCCCCC;
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) cubic-bezier(0.68, -0.55, 0.265, 1.55);
58}
59
60.tooltip::before {
61  content: attr(data-text-initial);
62}
63
64.tooltip::after {
65  content: "";
66  position: absolute;
67  bottom: calc(var(--tooltip-padding-y) / 2 * -1);
68  width: var(--tooltip-padding-y);
69  height: var(--tooltip-padding-y);
70  background: inherit;
71  left: 50%;
72  transform: translateX(-50%) rotate(45deg);
73  z-index: -999;
74  pointer-events: none;
75}
76
77.copy svg {
78  position: absolute;
79  top: 50%;
80  left: 50%;
81  transform: translate(-50%, -50%);
82}
83
84.checkmark {
85  display: none;
86}
87
88/* actions */
89
90.copy:hover .tooltip,
91.copy:focus:not(:focus-visible) .tooltip {
92  opacity: 1;
93  visibility: visible;
94  top: calc((100% + var(--tooltip-offset)) * -1);
95}
96
97.copy:focus:not(:focus-visible) .tooltip::before {
98  content: attr(data-text-end);
99}
100
101.copy:focus:not(:focus-visible) .clipboard {
102  display: none;
103}
104
105.copy:focus:not(:focus-visible) .checkmark {
106  display: block;
107}
108
109.copy:hover,
110.copy:focus {
111  background-color: var(--button-hover-bg);
112}
113
114.copy:active {
115  outline: var(--button-outline-width) solid var(--button-outline-color);
116}
117
118.copy:hover svg {
119  color: var(--button-hover-text-color);
120}