Pulsante di accesso

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

26 December 2024

Animazione CSS dell'occhio con frammento di codice

28 May 2025

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

}

Pulsante di accesso

Consigliato

Un codice di logicarray833

Animazione CSS dell'occhio con frammento di codice

Un codice di alejandrob.f2012

HTML

CSS

JS

Consigliato

Un codice di logicarray833

Animazione CSS dell'occhio con frammento di codice

Un codice di alejandrob.f2012

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS