JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<div class="regs">
    <button class="line"><span>Click this yo!</span></button>
    <button class="half-line"><span>Click this yo!</span></button>
    <button class="quarter-line"><span>Click this yo!</span></button>
    <button class="half"><span>Click this yo!</span></button>
    <button class="quarter"><span>Click this yo!</span></button>
    <button class="bulb"><span>Click this yo!</span></button>
    <button class="googly-eye"><span>Click this yo!</span></button>
    <button class="fader"><span>Click this yo!</span></button>
    <button class="out-of-names"><span>Click this yo!</span></button>
</div>

<div class="jiggly">
    <button class="line"><span>Click this yo!</span></button>
    <button class="half-line"><span>Click this yo!</span></button>
    <button class="quarter-line"><span>Click this yo!</span></button>
    <button class="half"><span>Click this yo!</span></button>
    <button class="quarter"><span>Click this yo!</span></button>
    <button class="bulb"><span>Click this yo!</span></button>
    <button class="googly-eye"><span>Click this yo!</span></button>
    <button class="fader"><span>Click this yo!</span></button>
    <button class="out-of-names"><span>Click this yo!</span></button>
</div>

CSS

div {
    display: inline-block;
    width: 30%;
}

button {
    -webkit-appearance: none;
    background-color: white;
    border: 0;
    color: red;
    margin: 2em auto;
    padding: 0;
    display: block;
    text-align: center;
}

button span {
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px red;
    border-radius: 4px;
    display: inline-block;
    font-size: 1.7em;
    overflow: hidden;
    padding: 0.3em 0.4em;
    position: relative;
    transition: background-color, border-radius, color, width, margin;
    transition-duration: 0.1s;
    white-space: nowrap;
    width: 100%;
}

button span:after {
    bottom: 0;
    content: "";
    display: none;
    position: absolute;
    right: 0;
}

.line span:after {
    border-top: 1px solid red;
    height: 50%;
    width: 100%;
}

.half-line span:after {
    border-top: 1px solid red;
    height: 50%;
    width: 50%;
}

.quarter-line span:after {
    border-top: 1px solid red;
    border-left: 1px solid red;
    height: 50%;
    width: 50%;
}

.half span:after {
    background-color: red;
    height: 50%;
    width: 100%;
}

.quarter span:after {
    background-color: red;
    height: 50%;
    width: 50%;
}

.bulb span:after {
    background-color: red;
    border-radius: 50% 20%;
    height: 35%;
    width: 70%;
}

.googly-eye span:after {
    background-color: red;
    border-radius: 50%;
    bottom: 5px;
    height: 40%;
    right: 5px;
    width: 40%;
}

.fader span:after {
    background-color: white;
    border-radius: 50%;
    bottom: 0;
    height: 50%;
    right: 0;
    width: 100%;
}

.out-of-names span:after {
    background-color: white;
    box-shadow: 0 0 30px 10px red;
    border-radius: 55%;
    bottom: 0;
    height: 25%;
    right: -10px;
    width: 25%;
}

button.working span:after {
    display: block;
}

button:hover span {
    background-color: red;
    color: white;
    cursor: pointer;
}

button.working:hover span {
    background-color: white;
}

button:active {
    outline:...

JavaScript

$('button').on('click', function (e) {
    var el = $(e.currentTarget),
        initHeight = el.outerHeight(),
        initWidth = el.find('span').outerWidth();
    
    el.blur();
    
    if (el.hasClass('working')) {
        el.css({
            'width':'auto',
            'height': 'auto'
        });
    }
    else {
         el.css({
            'width': initWidth,
            'height': initHeight
        });
    }
    
    el.toggleClass('working');
});