.btn {
    position: relative;
    display: inline-block;
    background-color: #de0043;
    border: 1.5px solid #de0043;

    text-decoration: none;

    font-weight: 800;
    font-style: italic;
    color: white;
    font-family: Arial;
    
    width: auto;
    padding: 18px 70px 18px 22px;
    text-transform: uppercase;

    overflow: hidden;
}

.btn::before {
    content: "";
    display: block;
    height: 100%;
    width: 100px;
    position: absolute;
    right: 0;
    top: 0;
    left: calc(100% - 54px);
    transform: skewX(-12deg);
    background-color: #ff3162;

    transition: left .3s ease;
}

.btn::after {
    content: ">";
    font-family: 'Major Mono Display', monospace;;
    font-weight: bold;
    font-size: 28px;
    font-style: normal;

    display: block;
    position: absolute;
    right: 16px;
    top: calc(50% - 15px);
    
    color: white;

    transition: right .3s ease;
}

.btn:hover{
    cursor: pointer;
}

.btn:hover::after {
    right: 28px;
}

.btn:hover::before {
    left: 110%;
}