Button by csemszepp
#212121
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.li { 43 --color: #ff2400; 44 filter: brightness(110%); 45 cursor: pointer; 46} 47.gas.li:hover { 48 filter: brightness(120%) drop-shadow(0 0 10px var(--glow)); 49} 50
54 views
Variation of abutton
MIT License