JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<script src="https://use.fontawesome.com/ffa9db4356.js"></script>
<a class="btn" href="#">Bekijk alle</a>

SCSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
    font-family: 'Arial';
}

body {
    padding: 30px;
}

.btn {
    $bg: orange;

    box-sizing: border-box;
    text-decoration: none;
    transition: all,250ms;
    width: auto;
    padding: 15px 20px 12px 20px;
    background: transparent;
    color: $bg;
    display: inline-block;
    position: relative;
    
    &:before {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        content: "\f105";
    
        float: right;
        font-size: 18px;
        margin-left: 10px;
        margin-top: 1px;
    }

    &:after {
        transition: all 200ms ease; 
        transform: translate(-50%, 0);
        position: absolute;
        content: '';
        left: 50%;
        width: 75%;
        display: inline-block;
        height: 2px;
        background: $bg;
        bottom: 0;
        z-index: -1;
    }


    &:hover {
        border-radius: 0;
        color: #fff;
        
        &:after {
            height: 100%;
            width: 100%;
        }
    }
}