32 lines
582 B
Svelte
32 lines
582 B
Svelte
|
<script lang="ts">
|
||
|
|
import { type IndieButton } from "./indie-button";
|
||
|
|
|
||
|
|
let {
|
||
|
|
button
|
||
|
|
}: {
|
||
|
|
button: IndieButton;
|
||
|
|
} = $props();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<a class="button" href="{button.link}">
|
||
|
|
<img src="/common/buttons/{button.img}" alt="{button.alt}">
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.button {
|
||
|
|
width: 88px;
|
||
|
|
height: 31px;
|
||
|
|
transition: scale var(--duration-animation) var(--anim-curve);
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button:hover {
|
||
|
|
scale: 1.2;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button img {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|