JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<div class=button id="SubmitLogin"  onclick="performAction()" type="submit" class="SubBtn">Login</button>

CSS

.button {
    position: relative;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    overflow: hidden;
    outline: none;
    transition: background-color 0.2s;
}

.button:active {
    background-color: #0056b3;  /* Slightly darker shade for an active state */
}

.button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.button.lightning::before {
    width: 200%;
    height: 200%;
}

JavaScript

document.querySelector('.button').addEventListener('click', function() {
    this.classList.add('lightning');
    setTimeout(() => {
        this.classList.remove('lightning');
    }, 400);  // Duration of the effect
});