JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<figure class="play"></figure>

SCSS

$pWidth: 100px;

figure.play{
    position: relative;
    display: block;
    width: $pWidth;
    perspective: $pWidth;
    
    &:before,
    &:after{
        transition: all 300ms;
        transform-origin: left center;
    }
    
    &:before{
        content: '';
        display: block;
        position: relative;
        border-top: 0 solid transparent;
        border-bottom: 0 solid transparent;
        border-left: $pWidth * 0.4 solid #000;
        padding-top: 100%;
    }
    
    &:after{
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        border-top: 0 solid transparent;
        border-bottom: 0 solid transparent;
        border-left: $pWidth * 0.4 solid #000;
    }
    
    //-- Hover --//
    &:hover,
    &:focus{
        
        &:before{
            padding-top: 50%;
            border-top: $pWidth / 4 solid transparent;
            border-bottom: $pWidth / 4 solid transparent;
            border-left: $pWidth * 0.5 solid #000;
        }
        
        &:after{
            top: 25%;
            bottom: 25%;
            border-top: $pWidth / 4 solid transparent;
            border-bottom: $pWidth / 4 solid transparent;
            border-left: $pWidth * 0.5 solid #000;
        }
        
    }
    
}

JavaScript

/**
 * PLAY BUTTON
 */