🔥 Add hover effect on buttons and links

This commit is contained in:
2021-10-19 16:10:22 +02:00
parent ab9b0e1a59
commit ea567693c2
7 changed files with 111 additions and 37 deletions

View File

@@ -1,11 +1,15 @@
<script lang="ts">
import SplitText from '$components/SplitText.svelte'
export let text: string
export let tag: string = 'a'
export let effect: string = 'link-3d'
export let url: string = undefined
export let disabled: boolean = undefined
const classes = [
'button',
effect ?? null,
$$props.class
].join(' ').trim()
</script>
@@ -13,11 +17,11 @@
{#if tag === 'button'}
<button class={classes} on:click disabled={disabled}>
<slot />
{text}
<SplitText {text} clone={true} />
</button>
{:else if tag === 'a'}
<a href={url} class={classes} on:click sveltekit:prefetch>
<slot />
<span>{text}</span>
<SplitText {text} clone={true} />
</a>
{/if}