Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
1.5 kB · 63 lines
CSS
at develop
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364.push-button { --color: red; aspect-ratio: 1; height: 100%; max-width: 10rem; max-height: 10rem; border-radius: 50%; overflow: hidden; background-color: var(--color); position: relative; background: linear-gradient( color-mix(in oklab, var(--color) 100%, white 10%) 0%, color-mix(in oklab, var(--color), black) 30%, color-mix(in oklab, var(--color), black) 70%, color-mix(in oklab, var(--color) 100%, white 10%) 100% ); background-repeat: no-repeat; box-shadow: inset 10px 10px 5px rgba(255, 255, 255, 0.3), inset -5px -5px 5px rgba(0, 0, 0, 0.3), 0 10px hsl(from var(--color) h calc(s * 0.9) calc(l * 0.6)); transition: box-shadow 0.3s ease, transform 0.3s ease;}.push-button:active { box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5), inset -2px -2px 8px rgba(255, 255, 255, 0.1), 0 7px hsl(from var(--color) h calc(s * 0.9) calc(l * 0.6)); transform: translateY(3px);}.push-button:before { content: ""; inset: 0; opacity: 0.8; position: absolute; width: 100%; height: 100%; background-image: radial-gradient( color-mix(in oklab, var(--color), #ffff00), var(--color) 40%, transparent 70% ); background-size: 120% 120%; background-position: center; transition: opacity 0.3s ease;}.push-button:after { content: ""; inset: 0; position: absolute; width: 100%; height: 100%; background-image: radial-gradient( transparent 30%, hsl(from var(--color) h s calc(l * 0.5) / 0.7) 70% ); background-size: 5% 5%;}.push-button:active:before { opacity: 0.5;}