Effet de survol pour les boutons de Foundation 6. Le mixin doit être inclus dans le components/_button.scss.

foundation-button-effect.scss

// Custom chema : hover effect
@mixin button-effect (
  $background: $button-background,
  $background-hover: $button-background-hover,
  $color: $button-color,
  $background-hover-lightness: $button-background-hover-lightness,
  $style: $button-fill
) {

  $background-hover-base: $color;
  $background-hover-1: darken($background-hover-base, 20%);
  $background-hover-2: $background-hover-base;
  $color-hover: color-pick-contrast($background-hover-2, ($button-color, $button-color-alt));


  @if $style == solid {
    $background-hover-base: scale-color($background, $lightness: $background-hover-lightness);
    $background-hover-1: $background-hover-base;
    $background-hover-2: darken($background-hover-base, 20%);

    $color-hover: color-pick-contrast($background-hover-2, ($button-color, $button-color-alt));

  }

  position: relative;
  overflow: hidden;
  z-index: 1;

  &::before,
  &::after{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 100%;
    left: 0;
    z-index: -1;
    transform: translate3d(0, 0, 0) rotate(-15deg);
    transform-origin: left bottom;
    transition: transform 0.3s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
  }

  &::before{
    background: $background-hover-1;
  }
  &::after{
    background: $background-hover-2;
  }

  &:hover, &:focus {
    color: $color-hover;
    border-color: $background-hover-2;

    &::before,
    &::after{
      transform: translate3d(0, 100%, 0) rotate(0);
    }
    &::after{
      transition-delay: 0.175s;
    }
  }
}