Next-level Login UI | HTML, CSS & JavaScript

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial;
        }

body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #0f172a;
            overflow: hidden;
            color: white;
        }

/* MORPH BUTTON */

.morph {
            width: 180px;
            height: 60px;
            border-radius: 40px;
            background: linear-gradient(45deg, #1e44d1, #19bbdf);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all .6s cubic-bezier(.68, -0.55, .27, 1.55);
            box-shadow: 0 0 20px rgba(0, 255, 255, .4);
        }

/* EXPANDED LOGIN FORM */

.morph.active {
            width: 360px;
            height: 420px;
            border-radius: 20px;
            cursor: default;
        }

/* BUTTON TEXT */

.btn-text {
            font-size: 18px;
            font-weight: bold;
            transition: .4s;
        }

.morph.active .btn-text {
            opacity: 0;
            transform: scale(.5);
        }

/* FORM */

.form {
            position: absolute;
            top: 90px;
            width: 80%;
            opacity: 0;
            transform: translateY(30px);
            transition: .6s;
        }

.morph.active .form {
            opacity: 1;
            transform: translateY(0);
        }

/* INPUT */

.input-box {
            position: relative;
            margin: 25px 0;
        }

.input-box input {
            width: 100%;
            padding: 12px;
            border: none;
            outline: none;
            border-radius: 8px;
            background: #0f172a;
            color: white;
        }

.input-box label {
            position: absolute;
            left: 10px;
            top: 12px;
            font-size: 13px;
            color: #aaa;
            transition: .3s;
            pointer-events: none;
        }

.input-box input:focus+label,
        .input-box input:valid+label {
            top: -14px;
            font-size: 11px;
            color: #ffffff;
        }

.input-box input:focus {
            box-shadow: 0 0 10px #06b6d4;
        }

/* LOGIN BUTTON */

.submit {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            background: white;
            color: #0f172a;
            font-weight: bold;
            cursor: pointer;
            margin-top: 10px;
            transition: .3s;
        }

.submit:hover {
            transform: scale(1.05);
        }

/* CLOSE */

.close {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 20px;
            opacity: 0;
            cursor: pointer;
        }

.morph.active .close {
            opacity: 1;
        }

/* PARTICLES */

.particle {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #06b6d4;
            pointer-events: none;
            animation: explode 1s ease-out forwards;
        }

@keyframes explode {
            0% {
                opacity: 1;
                transform: translate(0, 0) scale(1);
            }

100% {
                opacity: 0;
                transform: translate(var(--x), var(--y)) scale(.2);
            }
        }

const morph = document.getElementById("morph")

morph.addEventListener("click", (e) => {

if (!morph.classList.contains("active")) {

createParticles(e)

setTimeout(() => {
            morph.classList.add("active")
        }, 200)

}

})

function closeForm(e) {

e.stopPropagation()

morph.classList.remove("active")

}

/* PARTICLE BURST */

function createParticles(e) {

let rect = morph.getBoundingClientRect()
    let x = rect.left + rect.width / 2
    let y = rect.top + rect.height / 2

for (let i = 0; i < 50; i++) {

let particle = document.createElement("div")
        particle.className = "particle"

let angle = Math.random() * 360
        let radius = Math.random() * 200

let xMove = Math.cos(angle) * radius
        let yMove = Math.sin(angle) * radius

particle.style.left = x + "px"
        particle.style.top = y + "px"

particle.style.setProperty("--x", xMove + "px")
        particle.style.setProperty("--y", yMove + "px")

document.body.appendChild(particle)

setTimeout(() => {
            particle.remove()
        }, 1000)

}

- Next-level Login UI

Live Preview