JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<a href="#" class="button">
    Play
</a>

SCSS

.button {
    box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px;
    background-color: hsl(340, 100%, 75%);
    font-family: Arial, sans-serif;
    display: inline-block;
    padding: .5em 1.5em .4em 1.5em;
    font-size: 26px;
    color: hsl(340, 100%, 30%);
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    font-weight: bold;
    letter-spacing: 0.06em;
    border-radius: 5em 1em / 5em 1em;
    position: relative;
    overflow: hidden;
    
    &:after {
        content: '';
        position: absolute;
        width: 90%;
        height: 60%;
        top: 0;
        left: 10%;
        background-image: -webkit-gradient(linear, 0% 0, 100% 0, from(rgba(255, 255, 255, 0.54902)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.8, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.498039)));
        border-radius: 7em 1em / 5em 1em;
    }
}