WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botón flotante
660
ledoc
Abrir en el editor
Publica tu código
Recomendado
13 July 2024
Botón de descarga animado
30 August 2024
Botón de neón
9 September 2023
Efecto de desplazamiento del botón con CSS
HTML
Copy
BUTTON: SLIDE DOWN
BUTTON: SLIDE RIGHT
BUTTON: SLIDE INSIDE
BUTTON: SLIDE DIAGONAL
CSS
Copy
height: 100%; } body { height: 100%; margin: 0; background: #162944; } .button_slide { color: #FFF; border: 2px solid rgb(216, 2, 134); border-radius: 0px; padding: 18px 36px; display: inline-block; font-family: "Lucida Console", Monaco, monospace; font-size: 14px; letter-spacing: 1px; cursor: pointer; box-shadow: inset 0 0 0 0 #D80286; -webkit-transition: ease-out 0.4s; -moz-transition: ease-out 0.4s; transition: ease-out 0.4s; } .slide_down:hover { box-shadow: inset 0 100px 0 0 #D80286; } .slide_right:hover { box-shadow: inset 400px 0 0 0 #D80286; } .slide_left:hover { box-shadow: inset 0 0 0 50px #D80286; } .slide_diagonal:hover { box-shadow: inset 400px 50px 0 0 #D80286; } #outer { width: 364px; margin: 50px auto 0 auto; text-align: center; }
JS
Copy