Formulaire OTP HTML CSS

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

9 September 2023

Animation de basculement de triangle CSS

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

Formulaire OTP HTML CSS

Recommandé

Effet de survol de bouton CSS

Bouton HTML animé

Animation de basculement de triangle CSS

HTML

CSS

JS

Recommandé

Effet de survol de bouton CSS

Bouton HTML animé

Animation de basculement de triangle CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS