WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botão Firefly HTML CSS Tailwind
470
focrus1990
Abrir no Editor
Video
Publique Seu Código
1
Recomendado
5 July 2025
Exemplo de seletor de data HTML
28 January 2025
botão
26 December 2025
Modelo de formulário de login HTML para redes sociais
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) */