Botón de inicio de sesión

Abrir en el editor Publica tu código

Recomendado

28 November 2024

Control deslizante horizontal puro con menú deslizante

28 April 2024

<!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); }

}

Botón de inicio de sesión

Recomendado

Control deslizante horizontal puro con menú deslizante

Botón HTML animado

Calculadora del amor

HTML

CSS

JS

Recomendado

Control deslizante horizontal puro con menú deslizante

Botón HTML animado

Calculadora del amor

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS