52 lines
1.1 KiB
Text
52 lines
1.1 KiB
Text
---
|
|
interface Props {
|
|
className?: string;
|
|
href?: string;
|
|
}
|
|
|
|
const { className = '', href } = Astro.props;
|
|
---
|
|
|
|
{
|
|
href !== undefined ? (
|
|
<a href={href} class:list={['clean', 'btn', className]}>
|
|
<slot />
|
|
</a>
|
|
) : (
|
|
<button class:list={className}>
|
|
<slot />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
<style lang="scss">
|
|
button,
|
|
.btn {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
font-size: 1rem;
|
|
padding: var(--prj-spacing-1) var(--prj-spacing-3);
|
|
background-color: var(--prj-accent-bg);
|
|
color: var(--prj-accent-text);
|
|
|
|
border-radius: 6px;
|
|
border: 1px solid var(--prj-accent-bg);
|
|
|
|
cursor: pointer;
|
|
|
|
margin-bottom: 0;
|
|
box-shadow: 0 0 0px 0px var(--prj-accent-bg);
|
|
|
|
transition: color 0.2s, background-color 0.2s, translate 0.2s,
|
|
box-shadow 0.2s;
|
|
|
|
&:hover {
|
|
--anim-translation-value: -5px;
|
|
background-color: transparent;
|
|
color: var(--prj-text);
|
|
translate: var(--anim-translation-value) var(--anim-translation-value);
|
|
box-shadow: calc(var(--anim-translation-value) * -2)
|
|
calc(var(--anim-translation-value) * -2) 0px 0px var(--prj-accent-bg);
|
|
}
|
|
}
|
|
</style>
|