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