owlboard-svelte/src/lib/buttons/LinkButton.svelte

36 lines
955 B
Svelte

<script lang="ts">
export let link: string;
export let text: string;
</script>
<a class="link-button" href={link}>{text}</a>
<style>
.link-button {
color: aliceblue;
border: none;
border-radius: 20px;
text-decoration: none;
margin: 5px;
background-color: var(--island-button-color);
font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
padding: 5px 25px;
min-width: 40px;
width: fit-content;
height: 22px;
font-size: 16px;
font-weight: 400;
box-shadow: var(--box-shadow);
transition: all 0.3s ease;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.link-button:hover {
box-shadow: var(--box-shadow-dark);
background-color: rgb(45, 45, 45);
}
</style>