🔥 Add hover effect on buttons and links
This commit is contained in:
@@ -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}
|
||||
@@ -18,13 +18,13 @@
|
||||
<ul>
|
||||
{#each footer_links as { title, slug }}
|
||||
<li>
|
||||
<a href="/{slug}" sveltekit:prefetch>
|
||||
<a href="/{slug}" class="link-3d" sveltekit:prefetch>
|
||||
<SplitText text={title} clone={true} />
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
<li class="instagram">
|
||||
<a href="https://www.instagram.com/{instagram}" target="_blank" rel="noopener noreferrer external">
|
||||
<a href="https://www.instagram.com/{instagram}" target="_blank" rel="noopener noreferrer external" class="link-3d">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.8c2.67 0 2.99.01 4.04.06.98.04 1.5.2 1.86.34a3.27 3.27 0 0 1 1.9 1.9c.13.35.3.88.34 1.86.05 1.05.06 1.37.06 4.04s-.01 2.99-.06 4.04c-.04.98-.2 1.5-.34 1.86-.19.46-.4.8-.75 1.15a3.1 3.1 0 0 1-1.15.75c-.35.13-.88.3-1.86.34-1.05.05-1.37.06-4.04.06s-2.99-.01-4.04-.06c-.98-.04-1.5-.2-1.86-.34a3.1 3.1 0 0 1-1.15-.75 3.1 3.1 0 0 1-.75-1.15 5.6 5.6 0 0 1-.34-1.86A69.42 69.42 0 0 1 1.8 10c0-2.67.01-2.99.06-4.04.04-.98.2-1.5.34-1.86.19-.46.4-.8.75-1.15A3.1 3.1 0 0 1 4.1 2.2c.35-.13.88-.3 1.86-.34C7 1.81 7.33 1.8 10 1.8ZM10 0C7.28 0 6.94.01 5.88.06 4.8.11 4.08.28 3.45.52a4.9 4.9 0 0 0-1.77 1.16A4.9 4.9 0 0 0 .52 3.45a7.34 7.34 0 0 0-.46 2.43C.01 6.94 0 7.28 0 10s.01 3.06.06 4.12c.05 1.07.22 1.8.46 2.43.26.66.6 1.22 1.16 1.77.55.56 1.11.9 1.77 1.16a7.6 7.6 0 0 0 2.43.46c1.06.05 1.4.06 4.12.06s3.06-.01 4.12-.06a7.34 7.34 0 0 0 2.43-.46 4.9 4.9 0 0 0 1.77-1.16 4.9 4.9 0 0 0 1.16-1.77 7.6 7.6 0 0 0 .46-2.43c.05-1.06.06-1.4.06-4.12s-.01-3.06-.06-4.12a7.34 7.34 0 0 0-.46-2.43 4.9 4.9 0 0 0-1.16-1.77A4.9 4.9 0 0 0 16.55.52a7.34 7.34 0 0 0-2.43-.46C13.06.01 12.72 0 10 0Zm0 4.86a5.14 5.14 0 1 0 0 10.28 5.14 5.14 0 0 0 0-10.28Zm0 8.47a3.33 3.33 0 1 1 0-6.66 3.33 3.33 0 0 1 0 6.66Zm5.34-7.47a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z" />
|
||||
</svg>
|
||||
|
||||
@@ -80,6 +80,7 @@ button {
|
||||
}
|
||||
.text-split {
|
||||
span, &__line {
|
||||
display: inline-block;
|
||||
transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* Box shadows
|
||||
*/
|
||||
/*
|
||||
** Box shadows
|
||||
*/
|
||||
// Box: Dark
|
||||
.shadow-box-dark {
|
||||
box-shadow:
|
||||
@@ -37,3 +37,45 @@
|
||||
0 4px 4px $shadow-color,
|
||||
0 16px 16px $shadow-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
** Hovers
|
||||
*/
|
||||
// 3D effect link
|
||||
.link-3d {
|
||||
overflow: hidden;
|
||||
|
||||
.text-split {
|
||||
perspective: 300px;
|
||||
}
|
||||
.text-split__line {
|
||||
--offset-y: 100%;
|
||||
transform-origin: bottom center;
|
||||
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $color-secondary;
|
||||
transform: translate3d(0, var(--offset-y), 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.text-split__line {
|
||||
&:first-child {
|
||||
opacity: 0;
|
||||
transform: scale(0.92) translate3d(0, 12%, 0);
|
||||
}
|
||||
&:last-child {
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0);
|
||||
transition-delay: 55ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -9,6 +9,7 @@
|
||||
border-radius: 100vh;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.55s var(--ease-quart), color 0.55s var(--ease-quart);
|
||||
|
||||
@include bp (sm) {
|
||||
height: 48px;
|
||||
@@ -22,6 +23,17 @@
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
// Hover effect
|
||||
&:hover {
|
||||
background: $color-secondary;
|
||||
}
|
||||
.text-split__line {
|
||||
&:last-child {
|
||||
--offset-y: 65%;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Size variants
|
||||
@@ -56,15 +68,36 @@
|
||||
*/
|
||||
// Pink
|
||||
&--pink {
|
||||
color: $color-text;
|
||||
background: $color-secondary-light;
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: $color-secondary;
|
||||
}
|
||||
.text-split__line {
|
||||
&:last-child {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Beige
|
||||
&--beige {
|
||||
$color-button: #F2D3B8;
|
||||
color: $color-text;
|
||||
background: $color-button;
|
||||
|
||||
&[disabled] {
|
||||
background: none;
|
||||
border: 2px solid darken($color-button, 2);
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: $color-primary-tertiary20;
|
||||
background: darken($color-button, 2.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -56,7 +56,6 @@
|
||||
li {
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
@include bp (sm) {
|
||||
margin: 0 12px;
|
||||
@@ -82,34 +81,6 @@
|
||||
@include bp (md) {
|
||||
font-size: rem(16px);
|
||||
}
|
||||
|
||||
// Hover effect
|
||||
.text-split__line {
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $color-secondary;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
opacity: 0;
|
||||
transition-delay: calc(var(--i-w) * 100ms);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.text-split__line {
|
||||
&:first-child {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -25%, 0);
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
&:last-child {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
svg {
|
||||
margin-right: 8px;
|
||||
|
||||
@@ -31,8 +31,31 @@
|
||||
|
||||
// Button
|
||||
.button {
|
||||
box-shadow: 0 1px 1px rgba($color-shadow-brown, 0.05), 0 2px 2px rgba($color-shadow-brown, 0.05), 0 4px 4px rgba($color-shadow-brown, 0.05), 0 16px 16px rgba($color-shadow-brown, 0.05);
|
||||
$color-shadow: rgba($color-shadow-brown, 0.05);
|
||||
box-shadow:
|
||||
0 1px 1px $color-shadow,
|
||||
0 2px 2px $color-shadow,
|
||||
0 4px 4px $color-shadow,
|
||||
0 16px 16px $color-shadow;
|
||||
margin-bottom: 40px;
|
||||
|
||||
svg {
|
||||
transition: fill 0.3s;
|
||||
}
|
||||
.text-split__line {
|
||||
&:last-child {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
background-color: $color-primary-tertiary20;
|
||||
|
||||
svg {
|
||||
fill: $color-tertiary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Text
|
||||
|
||||
Reference in New Issue
Block a user