Skip to main content

Two-layer button

This is a kind of button that uses the overlay layer concept and shows secondary text on hover/focus.

Here is an example:

index.html
<button class="button two-layer-button style-orange size-lg">
I am a button
<span class="secondary-text">Hello dear</span>
</button>

<button class="button two-layer-button style-green size-lg">
Buy me a coffee
<span class="secondary-text">
<!-- SVG HERE -->
</span>
</button>

Custom reveal animation

You can change the animation when the button has hovered and the .secondary-text is going to be shown. Just change the --flatify__two-layer-button-animation-show CSS variable to a new animation shorthand.

Delay for custom animations

Because of the secondary layer fade-in animation as default, it is better to set a delay of 100ms for your custom animation.

index.html
<button class="button two-layer-button custom-button-1 style-blue">
I am a button
<span class="secondary-text">Hello dear</span>
</button>

<button class="button two-layer-button custom-button-2 style-blue">
I am a button
<span class="secondary-text">Hello dear</span>
</button>

<button class="button two-layer-button custom-button-3 style-blue">
I am a button
<span class="secondary-text">Hello dear</span>
</button>
style.css
/* Slide down */
@keyframes secondary-layer-slidedown {
0% {
transform: translateY(-1em);
}
100% {
transform: translateY(0);
}
}

.custom-button-1 {
--flatify__two-layer-button-animation-show: secondary-layer-slideup 0.3s 0.1s ease;
}

/* Blur */
@keyframes secondary-layer-blur {
0% {
transform: scale(1.5);
filter: blur(0.4em);
}
100% {
transform: scale(1);
filter: blur(0);
}
}

.custom-button-2 {
--flatify__two-layer-button-animation-show: secondary-layer-blur 0.5s 0.1s ease;
}

/* Letter spacing */
@keyframes secondary-layer-letters {
0% {
letter-spacing: 0.25em;
}
100% {
letter-spacing: 0;
}
}

.custom-button-3 {
--flatify__two-layer-button-animation-show: secondary-layer-letters 0.3s 0.1s ease;
}