El efecto 3D suspendido en un botón es un efecto en el que el botón parece acercarse al usuario al pasar el mouse sobre él. Estos botones se crean utilizando HTML y CSS.
Enfoque: la mejor manera de animar los objetos HTML se realiza utilizando CSS @keyframes y configurando las transiciones en diferentes etapas.
Código HTML:
- Cree un archivo HTML (index.html).
- Vincula el archivo CSS en HTML que proporciona todo el efecto de la animación a nuestro HTML. Esto también se coloca entre la etiqueta <head>
- Agregue dos etiquetas de anclaje <a> para crear botones y asígneles clases particulares.
- Nuevamente use dos etiquetas de anclaje <a> para crear los botones. Les asignamos clases particulares.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <h2>hovering buttons</h2> <a href="#" class='btn head_button'>hover here</a> <a href="#" class='btn head_button_2'>hover here</a> <br><br><br><br> <a href="#" class='btn head_button_3'>hover here</a> <a href="#" class='btn head_button_4'>hover here</a> </body> </html>
Código CSS: El siguiente es el contenido del archivo ‘style.css’ utilizado en el código HTML anterior. CSS se utiliza para dar diferentes tipos de animaciones y efectos a nuestra página HTML para que parezca interactiva para todos los usuarios.
- Restaura todos los efectos del navegador.
- Utilice clases e identificadores para dar efectos a los elementos HTML.
- Usa @keyframes{} para dar la animación a los elementos HTML.
CSS
/* Restoring browser effects */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body content is same for all
elements so we specify this in
body section */
body {
background-color: #000;
text-align: center;
padding: 20vh;
}
h2 {
text-align: center;
color: aquamarine;
position: absolute;
top: 10vh;
left: 43vw;
}
/* CSS for visited state of the link */
.btn:link,
.btn:visited {
text-transform: uppercase;
text-decoration: none;
position: relative;
transition: all .2s;
margin: 5vh;
}
/* CSS for hover over the link */
.btn:hover {
transform: translateY(-10px);
box-shadow: 0 10px 100px;
}
.btn:active {
transform: translateX(0);
box-shadow: 0 20px 50px;
}
.head_button {
background-color: #fff;
padding: 10px 40px;
border-radius: 70px;
display: inline-block;
animation-name: todown;
animation-duration: 5s;
}
.head_button_2 {
background-color: rgba(214, 200, 3, 0.705);
padding: 10px 40px;
border-radius: 70px;
display: inline-block;
animation-name: todown;
animation-duration: 5s;
color: rgba(13, 105, 13, 0.829);
}
.head_button_3 {
background-color: rgba(172, 16, 16, 0.705);
padding: 10px 40px;
border-radius: 70px;
display: inline-block;
animation-name: todown;
animation-duration: 5s;
color: #000;
}
.head_button_4 {
background-color: rgba(16, 172, 37, 0.705);
padding: 10px 40px;
border-radius: 70px;
display: inline-block;
animation-name: todown;
animation-duration: 5s;
color: aqua;
}
/* This pseudo class defines the
after effects of the link */
.btn::after {
content: '';
display: inline-block;
height: 100%;
width: 100%;
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .4s;
}
.head_button::after {
background-color: #fff;
}
.head_button_2::after {
background-color: rgba(131, 15, 15, 0.801);
}
.head_button_3::after {
background-color: rgba(15, 131, 31, 0.801);
}
.head_button_4::after {
background-color: rgba(131, 15, 116, 0.801);
}
.btn:hover::after {
transform: scale(1.5);
opacity: 0;
}
/* Animation that moves the button towards
down when we reload our web page */
@keyframes todown {
0% {
opacity: 0;
transform: translateY(-150px);
}
60% {
opacity: 0.6;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA