JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<a class="button" href="#">
    Click me hfkahjfk kjnkf
</a>

CSS

a {
    display: inline-block;
    width: auto;
    text-align: center;
    overflow: hidden;
    background: green;
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 4px 0 4px 0;
    font-family: Helvetica, sans-serif;
    padding: 25px;
    text-decoration: none;
    position: relative;
    z-index: 5;
}

.button::before {
    content: '';
    display: block;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 300%;
    background-color: pink;
    z-index: -1;
    opacity: 0;
    transform-origin: 50% 0 300px;
    transform: skew(-60deg) translate(0,-50%);
}

.button:hover::before {
    opacity: 1;  
}