JSFiddle - React, Tailwind, and code Playground

by Francisco Presencia Fandos

HTML

<input class="toggle" id="toggle" type="checkbox" />
<label class="button" for="toggle">Hover & Click</label>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    text-align: center;
}

.toggle {
    display: none;
}

.button {
    /* Some basic styles */
    color: #fff;

    font-size: 1.5em;
    font-family: sans;
    padding: .5em 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    
    /* Center vertically */
    top: 50%;
    transform: translateY(-50%);
    
    /* The logic to make it work */
    display: inline-block;
    position: relative;
    background: none;
    overflow: hidden;
}

.button:before,
.button:after {
    top: 0;
    left: 0;
    content: "";
    position: absolute;
    z-index: -1;
    width: 200%;
    padding: 200% 0 0 0;
    background: #0074D9;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all .5s ease;
}

.button:after {
    background: #FF851B;
    width: 0;
    padding: 0;
}

.button:hover:after {
    width: 200%;
    padding: 200% 0 0 0;
}

.button:hover:before {
    background: #003060;
    width: 0;
    padding: 0;
    transition: background 0s ease .5s,
        width .5s ease,
        padding .5s ease;
}

.button:active:before,
.toggle:checked + .button:before {
    background: #003060;
    width: 200%;
    padding: 200% 0 0 0;
}
.button:active:after,
.toggle:checked + .button:after {
    z-index: -2;
}