JSFiddle - React, Tailwind, and code Playground

by Grzegorz Matyszewski

HTML

<div class="button"><svg id="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="13.5px" height="17px" viewBox="0 0 13.5 17" enable-background="new 0 0 13.5 17" xml:space="preserve"><rect x="0" y="7.8" width="12.4" height="1.4"/><line fill="none" stroke="#000000" stroke-miterlimit="10" x2="4.6" y2="0.4" x1="13.1" y1="8.8"/><line fill="none" stroke="#000000" stroke-miterlimit="10" x1="13.1" y1="8.1" x2="4.6" y2="16.6"/></svg></div>

CSS

.button {
    background: #111111;
    cursor: pointer;
    padding: 5px 15px;
    display: inline-block;
    transform-origin: 0 0;
}
.button.bigger {
    transform: scale(5);
}
.button svg {
    transition: transform 0.3s ease;
    display: block;
}
.button rect {
    fill: #fff;
    transition: transform 0.3s ease;
    transform-origin: right center;
}
.button line {
    stroke-dasharray: 12 12;
    stroke-width: 1px;
    stroke: #fff;
    stroke-dashoffset: 5;
    transition: 0.3s stroke-dashoffset ease;
}
.button:hover svg {
    transform: translateX(3px);
}
.button:hover line {
    stroke-dashoffset: 4;
}
.button:hover rect {
    transform: scaleX(0.95);
}