Button by hannahyockel

1button {
2 display: flex;
3 flex-direction: column;
4 justify-content: center;
5 align-items: center;
6 padding: 1em;
7 border: 0px solid transparent;
8 background-color: rgba(100,77,237,0.08);
9 border-radius: 1.25em;
10 transition: all 0.2s linear;
11}
12
13button:hover {
14 box-shadow: 3.4px 2.5px 4.9px rgba(0, 0, 0, 0.025),
15  8.6px 6.3px 12.4px rgba(0, 0, 0, 0.035),
16  17.5px 12.8px 25.3px rgba(0, 0, 0, 0.045),
17  36.1px 26.3px 52.2px rgba(0, 0, 0, 0.055),
18  99px 72px 143px rgba(0, 0, 0, 0.08);
19}
20
21.tooltip {
22 position: relative;
23 display: inline-block;
24}
25
26.tooltip .tooltiptext {
27 visibility: hidden;
28 width: 4em;
29 background-color: rgba(0, 0, 0, 0.253);
30 color: #fff;
31 text-align: center;
32 border-radius: 6px;
33 padding: 5px 0;
34 position: absolute;
35 z-index: 1;
36 top: 25%;
37 left: 110%;
38}
39
40.tooltip .tooltiptext::after {
41 content: "";
42 position: absolute;
43 top: 50%;
44 right: 100%;
45 margin-top: -5px;
46 border-width: 5px;
47 border-style: solid;
48 border-color: transparent rgba(0, 0, 0, 0.253) transparent transparent;
49}
50
51.tooltip:hover .tooltiptext {
52 visibility: visible;
53}