El botón 3D iluminado direccionalmente es un efecto en el que el botón aparece como una figura 3D. Estos botones se crean utilizando HTML y CSS.
Enfoque: la mejor manera de animar los objetos HTML es mediante transformaciones CSS y configurando las transformaciones en diferentes etapas.
- Cree un archivo HTML.
- Vincula el archivo CSS en HTML que proporciona todos los efectos de la animación a nuestro HTML.
- Agregue tres etiquetas de anclaje <a> para crear botones y asígneles clases particulares.
Código HTML:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content ="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="buttons.css" type="text/css"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div> <ul> <li id="like"> <a href="#"> <i class="fa fa-thumbs-up"></i> Like </a> </li> <li id="comment"> <a href="#"> <i class="fa fa-comment"></i> Comment </a> </li> <li id="share"> <a href="#"> <i class="fa fa-share"></i> Share </a> </li> </ul> </div> </body> </html>
Código CSS: El siguiente es el contenido del archivo «buttons.css» utilizado en el código HTML anterior. CSS se utiliza para dar diferentes tipos de animaciones, transformaciones y efectos a nuestra página HTML para que parezca interactiva para todos los usuarios. Restaura todos los efectos del navegador. Use clases e identificaciones para dar efectos a los botones. Use transformaciones para dar botones 3D iluminados direccionalmente.
buttons.css
*{
margin: 0;
padding: 0;
}
div{
background: lightgreen;
width: 100vw;
height: 100vh;
font-family: 'Segoe UI', Tahoma,
Geneva, Verdana, sans-serif;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
ul{
position: absolute;
display: flex;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: rgba(0,0,0,0.7);
}
i{
padding: 10px;
}
ul li{
list-style: none;
margin: 10px;
display: block;
}
ul li a{
width: 200px;
height: 50px;
background: orangered;
display: flex;
font-size: 20px;
align-items: center;
justify-content: center;
transform: rotate(-30deg) skewX(25deg);
box-shadow: -20px 20px 8px;
rgba(0,0,0,0.5);
}
ul li a:before{
content:'';
position:absolute;
top:10px;
left:-20px;
background:orangered;
height:100%;
width:20px;
transform:rotate(0deg) skewY(-45deg);
}
ul li a:after{
content:'';
position:absolute;
bottom:-20px;
left:-10px;
background:orangered;
height:20px;
width:100%;
transform:rotate(0deg) skewX(-45deg);
}
li a:hover{
transform:rotate(-30deg) skew(25deg) translate(20px,-15px);
}
Producción:
Botones iluminados en 3D
Publicación traducida automáticamente
Artículo escrito por sabarish0088 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA