JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<a href="#!" class="inset-button">Something</a>

SCSS

body{
    font-family: sans-serif;
}
a{
    display: inline-block;
    background-color: #568abf;
    color: #fff;
    padding: 25px;
}

@mixin pushButton($borderColor, $height, $pushDistance){
    border-bottom: $height solid $borderColor;
    border-radius: $height;
    transition: border 300ms, margin 300ms;
    margin-top: 0;
    &:focus,
    &:active{
        margin-top: $pushDistance;
        border-bottom: ($height - $pushDistance) solid $borderColor;
    }
}

.inset-button{
    @include pushButton(#244775, 5px, 3px);
}