50 lines
1.1 KiB
Text
50 lines
1.1 KiB
Text
<button webc:root="override"><slot></slot></button>
|
|
|
|
<style webc:scoped="button">
|
|
:host {
|
|
--gradient-dir: to bottom right;
|
|
--gradient-base: var(--clr-box-background);
|
|
--gradient-start: oklch(from var(--gradient-base) calc(l + 0.2) c h);
|
|
--gradient-end: oklch(from var(--gradient-base) l c h);
|
|
|
|
position: relative;
|
|
|
|
background: linear-gradient(
|
|
var(--gradient-dir),
|
|
var(--gradient-start) 0%,
|
|
var(--gradient-end) 50%
|
|
);
|
|
|
|
color: var(--clr-text);
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
|
|
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
|
|
|
border: none;
|
|
border-radius: 0.5em;
|
|
padding: 0.5em 1em;
|
|
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
:host::before {
|
|
--gradient-start: oklch(from var(--gradient-base) calc(l + 0.1) c h);
|
|
|
|
content: '';
|
|
position: absolute;
|
|
inset: var(--border-thin);
|
|
background: linear-gradient(
|
|
var(--gradient-dir),
|
|
var(--gradient-start) 0%,
|
|
var(--gradient-end) 50%
|
|
);
|
|
border-radius: inherit;
|
|
z-index: -1;
|
|
}
|
|
|
|
:host:active {
|
|
--gradient-dir: to top left;
|
|
}
|
|
</style>
|