Botón de inicio de sesión

2,607 logicalbug731

Abrir en el editor Publica tu código

Recomendado

10 February 2025

botón

13 December 2025

Código HTML Canvas de WebGL para Super Mario 64

27 January 2026

Anuncio jugable HTML5 del juego Find the Alien

HTML

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

}