WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von Gregory
543
Skyrreum
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
11 June 2025
Ein Code von alejandrokundrah
9 June 2025
Ein Code von mabsolinfotech
14 February 2025
Ein Code von Pedro_bugica
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)`; });