JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<a class="btn" href="#">Lees meer</a>

SCSS

body {
    padding: 100px;
    * {
        box-sizing: border-box;
    }
}

$btnColor: #333;

button, .btn {
    
    transition: top 200ms ease;
    
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    color: $btnColor;
    
    position: relative;
    top:0;
    background: #fff;
    outline: none;
    box-shadow: none;
    border: 2px solid $btnColor;
    padding: 15px 40px;
    
    
    $ribbonW: 70px;
    $ribbonInset: 10px;
    
    &:after, &:before {
        transition: all 200ms ease;
        content: '';
        position: absolute;
        z-index: -1;
        width: $ribbonW;
        height: 50px;
        background: $btnColor;
        top: -50%;
        margin: 0;
    }
    
    &:before {
        left: -30px;
        -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%, $ribbonInset 50%, 0% 0%);
        clip-path: polygon(100% 0, 100% 100%, 0% 100%, $ribbonInset 50%, 0% 0%);
    }

    &:after {
        right: -30px;      
        -webkit-clip-path: polygon(100% 0%, ($ribbonW - $ribbonInset) 50%, 100% 100%, 0 100%, 0 0);
        clip-path: polygon(100% 0%, ($ribbonW - $ribbonInset) 50%, 100% 100%, 0 100%, 0 0);
    }
    
    &:hover {
        top: -5px;
   
        &:after, &:before {
           margin-top: 5px;
        }      
        &:before {
           margin-left: -5px;
        }
        &:after {
            margin-right: -5px;      
        }  
    }
}