Button by csemszepp

1#gasses {
2  display: flex;
3  flex-wrap: wrap;
4  justify-content: center;
5}
6
7.gas {
8  --blur: 1.75rem;
9  --box-blur: calc(0.5 * var(--blur));
10  --glow: var(--color);
11  --size: 12rem;
12
13  align-items: center;
14  border-radius: 12px;
15  border: 4px solid currentColor;
16  box-shadow: 
17    /* --- "glass" tube --- */
18    /* inside */ inset 0 0 0 2px
19      rgba(0, 0, 0, 0.15),
20    /* outside */ 0 0 0 2px rgba(0, 0, 0, 0.15),
21    /* --- glow --- */ /* inside */ inset 0 0 var(--box-blur) var(--glow),
22    /* outside */ 0 0 var(--box-blur) var(--glow);
23  color: var(--color, white);
24  display: inline-flex;
25  flex-direction: column;
26  font-family: system-ui, sans-serif;
27  height: var(--size);
28  justify-content: space-around;
29  padding: 1rem;
30  width: var(--size);
31}
32.gas.number {
33  font-weight: 700;
34}
35
36.symbol {
37  font-size: 4rem;
38  font-family: "Neon Glow";
39  text-shadow: 0 0 var(--blur) var(--glow);
40}
41
42.gas.xe {
43  --color: #c4c4c6;
44  filter: brightness(105%);
45  cursor: pointer;
46}
47
48.gas.xe:hover {
49  filter: brightness(120%) drop-shadow(0 0 10px var(--glow));
50}
51