Next-level expandable electric login form | HTML, CSS & JavaScript

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #050505;
        }

/* --- The Expanding Container --- */
        .expand-wrapper {
            position: relative;
            width: 160px;
            height: 60px;
            border-radius: 30px; /* Pill shape initially */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Adds a slight bounce effect */
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.2), 0 0 40px rgba(255, 0, 255, 0.2);
        }

/* Expand on Hover */
        .expand-wrapper:hover {
            width: 380px;
            height: 480px;
            border-radius: 15px; /* Box shape on hover */
            cursor: default;
        }

/* --- Electric Glowing Border --- */
        .expand-wrapper::before {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            background: conic-gradient(
                #00f3ff, #ff00c8, #00f3ff, #ff00c8, #00f3ff
            );
            animation: spin 3s linear infinite;
            z-index: 1;
        }

/* Inner Dark Box to hide the center of the gradient */
        .expand-wrapper::after {
            content: '';
            position: absolute;
            inset: 3px; /* Controls the thickness of the electric border */
            background: #0f0f11;
            border-radius: 27px;
            z-index: 2;
            transition: border-radius 0.5s ease;
        }

.expand-wrapper:hover::after {
            border-radius: 12px; /* Matches the outer border radius */
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* --- Initial Button Text --- */
        .btn-text {
            position: absolute;
            z-index: 10;
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-shadow: 0 0 10px #00f3ff;
            pointer-events: none;
            transition: all 0.3s ease;
        }

/* Hide text on hover */
        .expand-wrapper:hover .btn-text {
            opacity: 0;
            transform: translateY(-20px);
        }

/* --- The Hidden Form --- */
        .form-content {
            position: absolute;
            z-index: 10;
            width: 100%;
            height: 100%;
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transform: translateY(30px);
            transition: all 0.4s ease;
            transition-delay: 0s;
        }

/* Reveal form on hover */
        .expand-wrapper:hover .form-content {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition-delay: 0.3s; /* Waits for the box to expand first */
        }

/* Form Styling */
        .form-content h2 {
            color: #fff;
            text-align: center;
            margin-bottom: 30px;
            font-size: 28px;
            letter-spacing: 1px;
            text-shadow: 0 0 10px #ff00c8;
        }

.input-box {
            position: relative;
            margin-bottom: 30px;
        }

.input-box input {
            width: 100%;
            padding: 10px 0;
            background: transparent;
            border: none;
            border-bottom: 2px solid rgba(255, 255, 255, 0.5);
            color: #fff;
            font-size: 16px;
            outline: none;
            transition: 0.3s ease;
        }

.input-box input:focus {
            border-bottom: 2px solid #00f3ff;
            box-shadow: 0 5px 5px -5px #00f3ff;
        }

.input-box input::placeholder {
            color: #aaa;
            transition: 0.3s;
        }

.input-box input:focus::placeholder {
            color: transparent;
        }

.submit-btn {
            padding: 15px;
            background: transparent;
            color: #00f3ff;
            border: 2px solid #00f3ff;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 0 10px inset transparent;
        }

.submit-btn:hover {
            background: #00f3ff;
            color: #000;
            box-shadow: 0 0 20px #00f3ff, inset 0 0 10px #00f3ff;
        }

- Next-level expandable electric login form

Live Preview