66 lines
1.5 KiB
Svelte
66 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { ButtonType } from "$lib/IO/ButtonType.ts";
|
|
import { onMount } from "svelte";
|
|
|
|
export let href : string = "#";
|
|
export let type : ButtonType = ButtonType.Primary;
|
|
let cssName : string;
|
|
|
|
const buttonTypeColors = {
|
|
[ButtonType.Primary]: '--primary',
|
|
[ButtonType.Secondary]: '--secondary',
|
|
[ButtonType.Accent]: '--accent',
|
|
};
|
|
|
|
onMount(() => {
|
|
cssName = buttonTypeColors[type];
|
|
});
|
|
</script>
|
|
|
|
<a href={href} class="button" style="--button-color: var({cssName});">
|
|
<div class="content">
|
|
<slot name="content">
|
|
Click Me!
|
|
</slot>
|
|
</div>
|
|
</a>
|
|
|
|
<style>
|
|
.button {
|
|
white-space: nowrap;
|
|
border-radius: 6px;
|
|
border: none;
|
|
background-color: var(--button-color);
|
|
text-decoration: none;
|
|
|
|
transition: transform 100ms ease-in-out;
|
|
transform: translate(0, 0);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 1.5em;
|
|
|
|
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
|
|
padding: 0.8em 4em;
|
|
}
|
|
|
|
.button:hover {
|
|
transition: transform 100ms ease-in-out;
|
|
transform: translate(0, -5px);
|
|
|
|
cursor: pointer;
|
|
|
|
filter: brightness(130%);
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
color: var(--text1);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
}
|
|
</style>
|