Modulo di inserimento del numero di telefono HTML con pulsante più

404 codex

Apri nell'Editor Video Pubblica il Tuo Codice

Modulo di inserimento del numero di telefono HTML con pulsante più

Consigliato

28 September 2025

Esempio di animazione di caricamento CSS

11 August 2025

Modello HTML con P5.js e CSS

19 November 2024

Collegamento al passaggio del mouse

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Phone Input</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
        }

.card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 60px 50px;
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 600px;
            width: 100%;
            animation: fadeIn 0.6s ease-out;
        }

@keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

h1 {
            font-size: 28px;
            font-weight: 600;
            color: #1a202c;
            margin-bottom: 32px;
        }

.controls {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }

.number-display {
            flex: 1;
            min-width: 200px;
            padding: 16px 20px;
            font-size: 20px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            background: #f7fafc;
            color: #1a202c;
            font-weight: 500;
            transition: all 0.3s ease;
            user-select: none;
        }

.number-display:hover {
            border-color: #cbd5e0;
            background: white;
        }

.increment-button {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 12px;
            color: white;
            font-size: 28px;
            font-weight: 300;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

.increment-button:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
        }

.increment-button:active {
            transform: translateY(0) scale(0.95);
        }

.submit-button {
            padding: 16px 40px;
            font-size: 18px;
            font-weight: 600;
            color: white;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            flex-shrink: 0;
        }

.submit-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
        }

.submit-button:active {
            transform: translateY(0);
        }

@media (max-width: 600px) {
            .card {
                padding: 40px 30px;
            }

h1 {
                font-size: 24px;
            }

.number-display {
                width: 100%;
                font-size: 18px;
                padding: 14px 16px;
            }

.controls {
                gap: 12px;
            }

.increment-button {
                flex: 1;
            }

.submit-button {
                flex: 1;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Please enter your phone number:</h1>
        <div class="controls">
            <div class="number-display" id="display">(216) 409-9992</div>
            <button class="increment-button" id="plusButton" type="button">+</button>
            <button class="submit-button" type="button">Submit</button>
        </div>
    </div>

function refresh() {
                display.textContent = format(currentNumber);
            }

function increment() {
                currentNumber++;
                refresh();
            }

btn.onclick = increment;

refresh();
        })();
    </script>
</body>
</html>

Consigliato

Esempio di animazione di caricamento CSS

Modello HTML con P5.js e CSS

Collegamento al passaggio del mouse

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS