WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botón de luciérnagas
2654
btn7
Abrir en el editor
Publica tu código
¿Necesitas un sitio web?
Recomendado
30 May 2025
Codificación manual de la página de inicio de sesión de Facebook
29 June 2025
Power Gym: Plantilla HTML de fitness, entrenamiento y clases
4 December 2024
Un código de fastcloud893
HTML
Copy
Fireflies Button
Button
CSS
Copy
html, body { background: black; height: 100%; display: flex; align-items: center; justify-content: center; } .circle { width: 8px; height: 8px; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -4px 0 0 -4px; pointer-events: none; mix-blend-mode: screen; z-index: 10; box-shadow: 0px 0px 8px 0px #FDFCA9 inset, 0px 0px 24px 0px #FFEB3B, 0px 0px 8px 0px #FFFFFF42; } .button-wrapper { position: relative; } .button { z-index: 1; position: relative; text-decoration: none; text-align: center; appearance: none; display: inline-block; cursor: pointer; } .button::before { content: ""; box-shadow: 0px 0px 24px 0px #FFEB3B; mix-blend-mode: screen; transition: opacity 0.3s; position: absolute; top: 0; right: 0; left: 0; bottom: 0; border-radius: 999px; opacity: 0; } .button::after { content: ""; box-shadow: 0px 0px 23px 0px #FDFCA9 inset, 0px 0px 8px 0px #FFFFFF42; transition: opacity 0.3s; position: absolute; top: 0; right: 0; left: 0; bottom: 0; border-radius: 999px; opacity: 0; } .button-wrapper:hover { .button::before, .button::after { opacity: 1; } .dot { transform: translate(0, 0) rotate(var(--rotatation)); } .dot::after { animation-play-state: running; } } .dot { display: block; position: absolute; transition: transform calc(var(--speed) / 12) ease; width: var(--size); height: var(--size); transform: translate(var(--starting-x), var(--starting-y)) rotate(var(--rotatation)); } .dot::after { content: ""; animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3); animation-play-state: paused; display: block; border-radius: 100%; background: yellow; width: 100%; height: 100%; box-shadow: 0px 0px 6px 0px #FFEB3B, 0px 0px 4px 0px #FDFCA9 inset, 0px 0px 2px 1px #FFFFFF42; } .dot-1 { --rotatation: 0deg; --speed: 14s; --size: 6px; --starting-x: 30px; --starting-y: 20px; top: 2px; left: -16px; opacity: 0.7; } .dot-2 { --rotatation: 122deg; --speed: 16s; --size: 3px; --starting-x: 40px; --starting-y: 10px; top: 1px; left: 0px; opacity: 0.7; } .dot-3 { --rotatation: 39deg; --speed: 20s; --size: 4px; --starting-x: -10px; --starting-y: 20px; top: -8px; right: 14px; } .dot-4 { --rotatation: 220deg; --speed: 18s; --size: 2px; --starting-x: -30px; --starting-y: -5px; bottom: 4px; right: -14px; opacity: 0.9; } .dot-5 { --rotatation: 190deg; --speed: 22s; --size: 5px; --starting-x: -40px; --starting-y: -20px; bottom: -6px; right: -3px; } .dot-6 { --rotatation: 20deg; --speed: 15s; --size: 4px; --starting-x: 12px; --starting-y: -18px; bottom: -12px; left: 30px; opacity: 0.7; } .dot-7 { --rotatation: 300deg; --speed: 19s; --size: 3px; --starting-x: 6px; --starting-y: -20px; bottom: -16px; left: 44px; } @keyframes dimFirefly { 0% { opacity: 1; } 25% { opacity: 0.4; } 50% { opacity: 0.8; } 75% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes hoverFirefly { 0% { transform: translate(0, 0); } 12% { transform: translate(3px, 1px); } 24% { transform: translate(-2px, 3px); } 37% { transform: translate(2px, -2px); } 55% { transform: translate(-1px, 0); } 74% { transform: translate(0, 2px); } 88% { transform: translate(-3px, -1px); } 100% { transform: translate(0, 0); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */