JSFiddle - React, Tailwind, and code Playground

by Mikel

HTML

<div class="button">
    <div class="part1">PRODUCTO <span>&#62;</span></div>
    <div class="part2">Revestimientos Plásticos Textorados</div>
</div>
<div class="button">
    <div class="part1">PROFESIONALES <span>&#62;</span></div>
    <div class="part2">Lo Que Sea</div>
</div>

CSS

.button{
    position: relative;
    width: 675px;
    margin: 0 auto;
    color: #ccc;
    font-size: 28px;
    height: 52px;
    background-color: #212121;
    padding-top: 16px;
    overflow: hidden;
    transition: all 0.5s linear;
}

.button .part1{
    display: inline-block;
    position: absolute;
    top: 18px;
    right: 25%;
    transition: all 0.5s linear;
}
.button .part1 span{
    display: inline-block;
    transform: rotate(90deg);
    transition: all 0.5s linear;
}
.button .part2{
    display: inline-block;
    text-align: right;
    float: right;
    margin-right: -100%;
    margin-top: 5px;
    font-size: 18px;
    transition: all 0.5s linear;
}
.button:hover{
    background-color: #800001;
}
.button:hover .part1{
    right: 60%;
}
.button:hover .part1 span{
    transform: rotate(0deg);
}
.button:hover .part2{
    margin-right: 10%;