SF Button
A sci-fi style button with a glowing outline, meant for dark backgrounds. Tinted by --sf-color (default orange).
Examples
CSS variables
| Name | Type | Default | Description |
|---|---|---|---|
--sf-color | <color> | #f90 | Tint for the outline, text and glow. Set it on the element or any ancestor. |
Usage
<zakuni-sf-button style="--sf-color: #7df9ff">Engage</zakuni-sf-button>Set --sf-color on the element or an ancestor to change the colour. The glow fades on hover and press.
Implementation
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('zakuni-sf-button')
export class ZakuniSFButton extends LitElement {
static styles = css`
:host {
--_c: var(--sf-color, #f90);
}
button {
background: none;
border: 1px solid var(--_c);
border-radius: 1px;
color: var(--_c);
cursor: pointer;
font-size: 1rem;
font-weight: 300;
padding: 0.5em 1em;
filter: drop-shadow(0px 0px 8px var(--_c));
}
button:hover {
filter: drop-shadow(0px 0px 4px var(--_c));
}
button:active {
filter: drop-shadow(0px 0px 2px var(--_c));
}
`;
render() {
return html`
<button>Button</button>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"zakuni-sf-button": ZakuniSFButton;
}
}