En este proyecto, vamos a crear botones animados utilizando HTML y CSS. En estos botones, cuando pasamos el mouse sobre ellos, se muestra un emoji para una mejor experiencia de usuario.
Vistazo de los botones:
Enlace CDN: para los íconos de botones, usaremos el enlace CDN fontawesome. Coloque este enlace en la etiqueta del script.
https://kit.fontawesome.com/704ff50790.js
HTML: Cree un archivo HTML, luego cree la estructura de todos los botones que serán un efecto de desplazamiento (cambiar a icono). Cree un contenedor div dentro de ese contenedor, coloque todos los botones.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div class="container"> <div class="button-effect"> <h2>Animated Buttons on Hover</h2> <a class="effect effect-4" href="#" title="Confirm Delivery"> Confirm Delivery </a> <a class="effect effect-3" href="#" title="Download">Download</a> <a class="effect effect-2" href="#" title="Upload">Upload</a> <a class="effect effect-1" href="#" title="Delete">Delete</a> <a class="effect effect-5" href="#" title="Click Here to Message"> Message </a> </div> </div> <script src= "https://kit.fontawesome.com/704ff50790.js" crossorigin="anonymous"> </script> </body> </html>
CSS: Se utiliza para dar diferentes tipos de animaciones y efectos a nuestra página HTML para que se vea 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.
- Uso de la función de selector de n-ésimo hijo de CSS para llamar a diferentes enlaces.
CSS
<style>
body {
background-color: black;
}
body .container {
width: 850px;
margin: 70px auto 0px auto;
text-align: center;
}
body .container .button-effect {
padding: 30px 0px;
}
body .container .button-effect h2 {
font-family: "Droid Serif", serif;
font-size: 20px;
color: #fff;
margin-bottom: 40px;
}
body .container .button-effect a {
margin-right: 17px;
}
body .container .button-effect a:nth-child(2) {
background-color: #520a8d;
}
body .container .button-effect a:nth-child(3) {
background-color: #4d0325;
}
body .container .button-effect a:nth-child(4) {
background-color: #09858a;
}
body .container .button-effect a:nth-child(5) {
background-color: #e60d2a;
}
body .container .button-effect a:nth-child(6) {
background-color: #c45f0d;
}
body .container .button-effect a:last-child {
margin-right: 0px;
}
.effect {
text-align: center;
display: inline-block;
position: relative;
text-decoration: none;
color: #fff;
text-transform: capitalize;
/* background-color: - add your own background-color */
font-family: "Roboto", sans-serif;
/* put your font-family */
font-size: 18px;
padding: 20px 0px;
width: 150px;
border-radius: 6px;
overflow: hidden;
}
/* effect-4 styles */
.effect.effect-4 {
transition: all 0.2s linear 0s;
}
.effect.effect-4:before {
content: "\f0d1";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.effect.effect-4:hover {
text-indent: -9999px;
}
.effect.effect-4:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
.effect.effect-3 {
transition: all 0.2s linear 0s;
}
.effect.effect-3:before {
content: "\f019";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.effect.effect-3:hover {
text-indent: -9999px;
}
.effect.effect-3:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
.effect.effect-2 {
transition: all 0.2s linear 0s;
}
.effect.effect-2:before {
content: "\f093";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.effect.effect-2:hover {
text-indent: -9999px;
}
.effect.effect-2:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
.effect.effect-1 {
transition: all 0.2s linear 0s;
}
.effect.effect-1:before {
content: "\f2ed";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.effect.effect-1:hover {
text-indent: -9999px;
}
.effect.effect-1:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
.effect.effect-5 {
transition: all 0.2s linear 0s;
}
.effect.effect-5:before {
content: "\f1d8";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.effect.effect-5:hover {
text-indent: -9999px;
}
.effect.effect-5:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
</style>
Solución completa: en esta sección, uniremos las secciones anteriores y crearemos atractivos botones animados Hover.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<style>
body {
background-color: black;
}
body .container {
width: 850px;
margin: 70px auto 0px auto;
text-align: center;
}
body .container .button-effect {
padding: 30px 0px;
}
body .container .button-effect h2 {
font-family: "Droid Serif", serif;
font-size: 20px;
color: #fff;
margin-bottom: 40px;
}
body .container .button-effect a {
margin-right: 17px;
}
body .container .button-effect a:nth-child(2) {
background-color: #520a8d;
}
body .container .button-effect a:nth-child(3) {
background-color: #4d0325;
}
body .container .button-effect a:nth-child(4) {
background-color: #09858a;
}
body .container .button-effect a:nth-child(5) {
background-color: #e60d2a;
}
body .container .button-effect a:nth-child(6) {
background-color: #c45f0d;
}
body .container .button-effect a:last-child {
margin-right: 0px;
}
.effect {
text-align: center;
display: inline-block;
position: relative;
text-decoration: none;
color: #fff;
text-transform: capitalize;
/* background-color: - add your own background-color */
font-family: "Roboto", sans-serif;
/* put your font-family */
font-size: 18px;
padding: 20px 0px;
width: 150px;
border-radius: 6px;
overflow: hidden;
}
/* effect-4 styles */
.effect.effect-4 {
transition: all 0.2s linear 0s;
}
.effect.effect-4:before {
content: "\f0d1";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.effect.effect-4:hover {
text-indent: -9999px;
}
.effect.effect-4:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
.effect.effect-3 {
transition: all 0.2s linear 0s;
}
.effect.effect-3:before {
content: "\f019";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.effect.effect-3:hover {
text-indent: -9999px;
}
.effect.effect-3:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
.effect.effect-2 {
transition: all 0.2s linear 0s;
}
.effect.effect-2:before {
content: "\f093";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.effect.effect-2:hover {
text-indent: -9999px;
}
.effect.effect-2:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
.effect.effect-1 {
transition: all 0.2s linear 0s;
}
.effect.effect-1:before {
content: "\f2ed";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.effect.effect-1:hover {
text-indent: -9999px;
}
.effect.effect-1:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
.effect.effect-5 {
transition: all 0.2s linear 0s;
}
.effect.effect-5:before {
content: "\f1d8";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
transform: scale(0, 1);
transition: all 0.2s linear 0s;
}
.effect.effect-5:hover {
text-indent: -9999px;
}
.effect.effect-5:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="button-effect">
<h2>Animated Buttons on Hover</h2>
<a class="effect effect-4" href="#"
title="Confirm Delivery">
Confirm Delivery
</a>
<a class="effect effect-3" href="#"
title="Download">Download</a>
<a class="effect effect-2" href="#"
title="Upload">Upload</a>
<a class="effect effect-1" href="#"
title="Delete">Delete</a>
<a class="effect effect-5" href="#"
title="Click Here to Message">
Message
</a>
</div>
</div>
<script src=
"https://kit.fontawesome.com/704ff50790.js"
crossorigin="anonymous"></script>
</body>
</html>
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