WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code de Gregory
539
Skyrreum
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
13 June 2025
Un code de Metehan
5 July 2025
Panneau de connexion et d'inscription Glassy V2 de TheDoc
12 June 2025
Calculateur de taxes Robux
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)`; });