WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
El safari de microinteracción
518
ByBy.inc
Abrir en el editor
Publica tu código
Recomendado
17 September 2024
Inicio de sesión simple
3 November 2025
Animación de árbol de Navidad SVG con JavaScript
14 February 2025
Un código de Pedro_bugica
HTML
Copy
Botão com Hover
CSS
Copy
<style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background-color: #000; } .button { background: transparent; border: none; cursor: pointer; position: relative; width: 200px; height: 50px; margin-bottom: 20px; } .button::before { content: ''; position: absolute; top: 0; left: 0; width: 200px; height: 50px; background-color: #F8F8F2; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .button:hover::before { transform: scaleX(1); } .form-input { background: transparent; border: none; color: #F8F8F2; width: 200px; padding: 10px; border-radius: 8px; opacity: 0.7; transition: opacity 0.3s ease; } .form-input:focus { opacity: 1; } .spinner { border: 4px solid #F8F8F2; border-top: 4px solid #AE81FF; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-right: 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */