SF Button
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`
button {
background: none;
border: 1px solid #f90;
border-radius: 1px;
color: #f90;
cursor: pointer;
font-size: 1rem;
font-weight: 300;
padding: 0.5em 1em;
filter: drop-shadow(0px 0px 8px #f90);
}
button:hover {
filter: drop-shadow(0px 0px 4px #f90);
}
button:active {
filter: drop-shadow(0px 0px 2px #f90);
}
`;
render() {
return html`
<button>Button</button>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"zakuni-sf-button": ZakuniSFButton;
}
}