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 33.number { 34 font-weight: 700; 35} 36 37.symbol { 38 font-size: 4rem; 39 font-family: "Neon Glow"; 40 text-shadow: 0 0 var(--blur) var(--glow); 41} 42 43.gas.ar { 44 --color: #e555c7; 45 filter: brightness(125%); 46 cursor: pointer; 47} 48 49.gas.ar:hover { 50 filter: brightness(120%) drop-shadow(0 0 10px var(--glow)); 51} 52
47 views
Variation of abutton
Original Creator: Ryan Johnson
This UI element is reposted from an external origin. Show them some appreciation!
MIT License