WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un codice di Gregory
812
Skyrreum
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
15 October 2025
Mostro dell'orologio del conto alla rovescia di Halloween
18 April 2025
Un codice di Metehan
5 June 2025
Pagina di autorizzazione Accesso/Registrazione
HTML
Copy
Bouton Néon 3D
Click me!
CSS
Copy
body { margin: 0; height: 100vh; background-color: #000; display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', sans-serif; overflow: hidden; } .container { perspective: 1000px; } .btn-wrapper { display: inline-block; transform-style: preserve-3d; transition: transform 0.1s ease; } .neon-btn { background: transparent; border: 2px solid red; color: red; padding: 20px 50px; font-size: 22px; font-weight: bold; text-transform: uppercase; border-radius: 12px; cursor: pointer; position: relative; box-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 50px red, 0 0 100px red; transition: all 0.2s ease; } .neon-btn:hover { box-shadow: 0 0 15px red, 0 0 30px red, 0 0 60px red, 0 0 100px red; transform: scale(1.05); } .neon-btn:active { transform: translateZ(-20px); box-shadow: 0 0 8px red, 0 0 16px red, 0 0 24px red; } .neon-btn::after { content: ""; position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); width: 300px; height: 80px; background: radial-gradient(ellipse at center, rgba(255,0,0,0.3) 0%, rgba(0,0,0,0) 80%); z-index: -1; filter: blur(10px); }
JS
Copy
// Changement de texte temporaire function clickBouton(button) { button.innerText = "Thanks !"; button.disabled = true; setTimeout(() => { button.innerText = "Click me!"; button.disabled = false; }, 3000); } // Effet 3D au mouvement de la souris const wrapper = document.querySelector('.btn-wrapper'); document.addEventListener('mousemove', (e) => { const x = e.clientX / window.innerWidth - 0.5; const y = e.clientY / window.innerHeight - 0.5; const rotateX = y * 20; const rotateY = x * -30; wrapper.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; });