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
4878
codex
Abrir en el editor
Publica tu código
Recomendado
20 September 2025
Animación de carga de CSS Spinner
20 August 2025
Plantilla HTML CSS para formulario de inicio de sesión y registro
9 September 2024
Formulario de inicio de sesión de Glowing Light
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