Formulario HTML CSS OTP

2,712 MyPortfolio

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

10 July 2025

Ejemplo HTML de pantalla de carga animada con CSS

12 October 2026

Sobre interactivo para cartas de amor en CSS y JavaScript

10 January 2026

Código HTML CSS del formulario de inicio de sesión animado

HTML

CSS

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

/* Body Styling */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f4f8;
        }

/* Container Styling */
        .otp-container {
            background: #ffffff;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 400px;
        }

/* Heading Styling */
        .otp-container h2 {
            color: #333;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

/* OTP Input Styling */
        .otp-input {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin: 1rem 0;
        }

.otp-input input[type="text"] {
            width: 40px;
            height: 50px;
            font-size: 1.5rem;
            text-align: center;
            border: 2px solid #ddd;
            border-radius: 6px;
            transition: border-color 0.3s;
        }

.otp-input input[type="text"]:focus {
            border-color: #007bff;
            outline: none;
        }

/* Submit Button Styling */
        .submit-btn {
            background-color: #007bff;
            color: #ffffff;
            font-size: 1rem;
            padding: 0.7rem 1.5rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

.submit-btn:hover {
            background-color: #0056b3;
        }

/* Instruction Text */
        .instruction {
            color: #666;
            font-size: 0.9rem;
        }