Button Interaction Demo

Sorry, this code snippet failed to load, but you can still check it out over on CodePen!

<button>Hello!</button>

$black:     #0d0d0d;
$gray:      #1d1d1d;
$brand:     #8cddff;
$brand-alt: #f473ff;

button {
    font-size: 4em;
    background: none;
    color: $brand;
    display: block;
    padding: .125em .25em;
    border: 0;
    position: relative;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    &:before {
        content: "";
        background-color: $black;
        width: 0;
        height: 100%;
        border-bottom: .125em solid rgba($brand, 0.6);
        border-radius: .0625em;
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
        z-index: -1;
        transition: width .2s ease;
    }
    &:hover,
    &:focus,
    &:active {
        color: $brand-alt;
        outline: none;
        &:before {
            width: 100%;
            border-bottom-color: rgba($brand-alt, 0.6);
            left: 0;
            right: auto;
        }
    }
}