Login button

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login and Signup</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="form-container">
            <div class="button-box">
                <button id="loginBtn" class="toggle-btn" onclick="showLogin()">Login</button>
                <button id="signupBtn" class="toggle-btn" onclick="showSignup()">Signup</button>
            </div>
            <form id="loginForm" class="form" action="#" method="POST">
                <h2>Login</h2>
                <input type="text" placeholder="Username" required>
                <input type="password" placeholder="Password" required>
                <button type="submit" class="submit-btn">Login</button>
            </form>
            <form id="signupForm" class="form" action="#" method="POST">
                <h2>Signup</h2>
                <input type="text" placeholder="Username" required>
                <input type="email" placeholder="Email" required>
                <input type="password" placeholder="Password" required>
                <button type="submit" class="submit-btn">Signup</button>
            </form>
        </div>
    </div>

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */                                           
* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: Arial, sans-serif;

background-color: white;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.container {

width: 300px;

background-color: white;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

position: relative;

overflow: hidden;

}

.form-container {

position: relative;

}

.form {

display: none;

animation: slide-in 0.5s ease;

}

.form h2 {

color: orange;

margin-bottom: 10px;

}

input {

width: 100%;

padding: 10px;

margin: 10px 0;

border: 1px solid orange;

border-radius: 5px;

}

button {

width: 100%;

padding: 10px;

border: none;

background-color: orange;

color: white;

border-radius: 5px;

cursor: pointer;

}

button:hover {

background-color: darkorange;

}

.button-box {

display: flex;

justify-content: space-between;

margin-bottom: 10px;

}

.toggle-btn {

background-color: white;

border: 1px solid orange;

padding: 10px;

cursor: pointer;

transition: background-color 0.3s;

}

.toggle-btn:hover {

background-color: orange;

color: white;

}

@keyframes slide-in {

from { opacity: 0; transform: translateX(100%); }

to { opacity: 1; transform: translateX(0); }

}

Login button

Recommended

HTML Contact Buttons Example

CSS Glowing Buttons

button Irani

HTML

CSS

JS

Recommended

HTML Contact Buttons Example

CSS Glowing Buttons

button Irani

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS