feat: add button component

This commit is contained in:
Sebin Nyshkim 2025-06-20 14:03:38 +02:00
parent e8f7d61ed0
commit bf29aa9bd7

View file

@ -0,0 +1,40 @@
<button webc:root="override"><slot></slot></button>
<style webc:scoped="button">
:host {
--gradient-dir: to bottom right;
position: relative;
background: linear-gradient(
var(--gradient-dir),
var(--clr-box-gradient-start) 0%,
var(--clr-box-gradient-end) 50%
);
color: white;
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 {
content: '';
position: absolute;
inset: var(--border-thin);
background-color: var(--clr-box-background);
border-radius: inherit;
z-index: -1;
}
:host:active {
--gradient-dir: to top left;
}
</style>