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;
}