Botón de inicio de sesión

Abrir en el editor Video Publica tu código

Recomendado

17 June 2025

Deslizador de gelatina animado

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

}

Botón de inicio de sesión

Recomendado

Un código de PNL

Botón de descarga animado

Deslizador de gelatina animado

HTML

CSS

JS

Recomendado

Un código de PNL

Botón de descarga animado

Deslizador de gelatina animado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS