JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<a href="#" class="ghost-button">Hover me, Ollie</a>

SCSS

@import url(http://fonts.googleapis.com/css?family=Lato:900);

$c-bg: #7351ad;
$c-btn: #fff;

html,body{
    background-color: $c-bg;
    text-align:center;
}

body{
    padding-top: 10%;
}

a.ghost-button{
    display: inline-block;
    background-color: rgba($c-btn,0);
    border: 3px solid $c-btn;
    border-radius: 5px;
    color: $c-btn;
    padding: 10px 16px;
    position: relative;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    text-decoration: none;
    outline: none;
    z-index: 1;
    transition: color 300ms;
    
    &:after{
        content: "";
        display: block;
        position: absolute;
        top: 100%;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: $c-btn;
        z-index: -1;
        transition: top 300ms;
    }
    
    &:hover,
    &:focus{
        color: $c-bg;
            
        &:after{
            top: 0;
        }
        
    }
    
}