feat: ✨ add button component
This commit is contained in:
parent
e8f7d61ed0
commit
bf29aa9bd7
1 changed files with 40 additions and 0 deletions
40
src/components/ref-button.webc
Normal file
40
src/components/ref-button.webc
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue