SF Link
A glowing link with a thin underline, meant for dark backgrounds. The target is set with the href property and the colour by --sf-color.
Examples
Properties
| Name | Type | Default | Description |
|---|---|---|---|
href | string | '#' | Destination URL, passed to the inner anchor. |
CSS variables
| Name | Type | Default | Description |
|---|---|---|---|
--sf-color | <color> | #f90 | Tint for the text, line and glow. Set it on the element or any ancestor. |
Usage
<zakuni-sf-link href="/sf-button" style="--sf-color: #7df9ff">Engage</zakuni-sf-link>href defaults to # when omitted. The glow strengthens on hover and the underline disappears while pressed.
Implementation
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('zakuni-sf-link')
export class ZakuniSFLink extends LitElement {
@property({ type: String })
href = '#';
static styles = css`
:host {
--_c: var(--sf-color, #f90);
}
a {
color: var(--_c);
font-weight: 300;
text-decoration: none;
border-bottom: 1px solid var(--_c);
padding-bottom: 0.1em;
filter: drop-shadow(0 0 4px var(--_c));
transition: filter 0.2s, border-color 0.2s;
}
a:hover {
filter: drop-shadow(0 0 8px var(--_c));
}
a:active {
filter: drop-shadow(0 0 2px var(--_c));
border-color: transparent;
}
`;
render() {
// Kept on one line so no whitespace text nodes end up around the anchor.
return html`<a href=${this.href}><slot></slot></a>`;
}
}
declare global {
interface HTMLElementTagNameMap {
"zakuni-sf-link": ZakuniSFLink;
}
}