WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Efecto de desplazamiento del botón con CSS
4606
codex
Abrir en el editor
Publica tu código
Recomendado
20 August 2024
Formulario de inicio de sesión LED
2 July 2025
Iniciar sesión desde TheDOC
4 October 2025
Ejemplo de animación de capa CSS
HTML
Copy
Webleb
Hover Me
CSS
Copy
body { background: #44A08D; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #093637, #44A08D); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #093637, #44A08D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .btn { cursor: pointer; position: relative; padding: 10px 20px; background: rgb(3, 247, 226); font-size: 28px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; transition: all 1s; } .btn:after, .btn:before { content: " "; width: 10px; height: 10px; position: absolute; border: 0px solid #fff; transition: all 1s; } .btn:after { top: -1px; left: -1px; border-top: 5px solid black; border-left: 5px solid black; } .btn:before { bottom: -1px; right: -1px; border-bottom: 5px solid black; border-right: 5px solid black; } .btn:hover { border-top-right-radius: 0px; border-bottom-left-radius: 0px; } .btn:hover:before, .btn:hover:after { width: 100%; height: 100%; } .data-container { background: #ffebee; height: 100vh; display: flex; justify-content: center; align-items: center; }
JS
Copy
// Nothing to Copy