JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<button id="back-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="11.414" height="6.207" viewBox="0 0 11.414 6.207">
                        <path id="Path" d="M0,0,5,5l5-5" transform="translate(0.707 0.707)" fill="none" stroke="#99a" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1"></path>
                    </svg>
    </button>

CSS

body {
    background: black;
}
button#back-button {
    width: 70px;
    height: 70px;
    background: #2B2B2B;
    border-radius: 5px;
    border: 1px solid #99a;
    cursor: pointer;
    outline: none;
    transition: .6s;
}
button#back-button svg {
    transform: rotate(90deg);
    transition: .6s;
}
button#back-button:hover svg {
    transform: translate(-5px,0) rotate(90deg);
}
button#back-button:hover {
    background: #00aeef14;
}