WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un código de Gregory
546
Skyrreum
Abrir en el editor
Publica tu código
Recomendado
31 August 2024
Tarjetas de filtro CSS
18 June 2025
Portal Escolar: Consulta de Resultados y Pago de Matrícula
16 June 2025
Un código de daniel_pindou_7
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)`; });