// Animate the size, inside
.hover01:hover,
.hover01:focus {
    box-shadow: inset 0 0 0 2em var(--hover);
}

// Animate the size, outside
.hover02:hover,
.hover02:focus {
    animation: pulse 1s;
    box-shadow: 0 0 0 2em rgba(#fff, 0);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--hover);
    }
}

// Stack multiple shadows, one from the left, the other from the right
.hover03:hover,
.hover03:focus {
    box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
}

// Size can also be negative; see how it's smaller than the element
.hover04:hover,
.hover04:focus {
    box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
    transform: translateY(-0.25em);
}

// Animating from the bottom
.hover05:hover,
.hover05:focus {
    box-shadow: inset 0 -3.25em 0 0 var(--hover);
}

// And from the left
.hover06:hover,
.hover06:focus {
    box-shadow: inset 10em 0 0 0 var(--hover);
}

// Multiple shadows, one on the outside, another on the inside
.hover07 {
    box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);
    &:hover,
    &:focus {
        box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
    }
}

//=== Set button colors
// If you wonder why use Sass vars or CSS custom properties...
// Make a map with the class names and matching colors
$colors: ( hover01: #e68488, hover02: #e68488, hover03: #e68488, hover04: #e68488, hover05: #e68488, hover06: #e68488, hover07: #e68488);
// Sass variables compile to a static string; CSS variables are dynamic and inherited
// Loop through the map and set CSS custom properties using Sass variables
@each $button,
$color in $colors {
    .#{$button} {
        --color: #{$color};
        --hover: #c15457;
    }
}

// Now every button will have different colors as set above. We get to use the same structure, only changing the custom properties.
a#buttonHover {
    color: var(--color);
    transition: 0.25s;
    &:hover,
    &:focus {
        border-color: var(--hover);
        color: #fff;
    }
}

a#buttonHover {
    font-family: 'Lato', sans-serif;
    background: none;
    border: 2px solid #e68488;
    font: inherit;
    line-height: 1;
    padding: 10px 25px;
    border-radius: 8px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 900;
    background: #e68488;
    color: #fff;
}