JSFiddle - React, Tailwind, and code Playground

by nathanziarek

HTML

<div class="transform-button"></div>

CSS

.transform-button, .transform-button:after, .transform-button:before {
    -webkit-transition: width 300ms ease, height 300ms ease, top 300ms ease, left 300ms ease, -webkit-transform 300ms ease
}

.transform-button {
    width: 40px;
    height: 40px;
    position: relative;
    background: yellow
}

.ex:after {
    width: 3px;
    height: 30px;
    background: #888;
    content:"";
    position: absolute;
    top: 5px;
    left: 18.5px;
    -webkit-transform: rotate(45deg);
}
.ex:before {
    width: 3px;
    height: 30px;
    background: #888;
    content:"";
    position: absolute;
    top: 5px;
    left: 18.5px;
    -webkit-transform: rotate(-45deg);
}

.back:after {
    width: 3px;
    height: 16px;
    background: #888;
    content:"";
    position: absolute;
    top: 7px;
    left: 18.5px;
    -webkit-transform: rotate(45deg);
}
.back:before {
    width: 3px;
    height: 16px;
    background: #888;
    content:"";
    position: absolute;
    top: 17px;
    left: 18.5px;
    -webkit-transform: rotate(-45deg);
}

JavaScript

var l = ['back', 'ex'];
var t = 0;

$(".transform-button").click( function() {
    $(this).removeClass('back ex');
    var g = Math.floor(Math.random()*l.length);
    $(this).addClass(l[g]);
});