Para hoy vamos a aprender a crear un sencillo pero profesional botón animado en css3, sin necesidad de utilizar JavaScript.
Existen mutiltud de animaciones que podemos realizar en CSS3 para animar un botón. El botón fantasma, tal y como lo denomina su autor, nos permite crear un efecto al pasar el ratón sobre el botón, cambiando el fondo al color del texto, y el texto al color del fondo. Todo con una bonita y suave animación.
Es bastante sencillo de realizar y únicamente debemos de realizarlo paso a paso hasta llegar al resultado final.
Para comenzar crearmos dos botones bajo la clase bttn y bttn-dark. Éstas clases nos permitirán posteriormente darle estilos a nuestros botones y realizar las animaciones.
<div class="flex">
<a href="#0" class="bttn">Tu Web Creativa</a>
</div>
<div class="flex dark">
<a href="#0" class="bttn-dark">tuwebcreativa.com</a>
</div>
Utilizaremos SASS, que para aquellos que lo desconozcan es sencillamente un meta-lenguaje para escribir CSS que se utiliza para describir el estilo de un documento de manera limpia y estructural.
Es importante reseñar que la extensión que deberemos de utilizar será .scss, en vez de, css.
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:700';
$font:'Source Sans Pro', sans-serif;
$primary:#FF0072;
$second:#644cad;
$third:#4426a8;
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body{
height:100%;
width: 100%;
}
body {
padding:0px;
margin:0;
font-family:$font;
background: #F5F0FF;
-webkit-font-smoothing: antialiased;
}
.dark {
background:#24252A;
}
.flex {
min-height:50vh;
display:flex;
align-items:center;
justify-content:center;
}
a.bttn {
color:$primary;
text-decoration:none;
-webkit-transition:0.3s all ease;
transition:0.3s ease all;
&:hover {
color:#FFF;
}
&:focus {
color:#FFF;
}
}
a.bttn-dark {
color:$second;
text-decoration:none;
-webkit-transition:0.3s all ease;
transition:0.3s ease all;
&:hover {
color:#FFF;
}
&:focus {
color:#FFF;
}
}
.bttn {
font-size:18px;
letter-spacing:2px;
text-transform:uppercase;
display:inline-block;
text-align:center;
width:270px;
font-weight:bold;
padding:14px 0px;
border:3px solid $primary;
border-radius:2px;
position:relative;
box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
&:before {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
position:absolute;
top:0;
left:50%;
right:50%;
bottom:0;
opacity:0;
content:'';
background-color:$primary;
z-index:-2;
}
&:hover {
&:before {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}
}
&:focus {
&:before {
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}
}
}
.bttn-dark {
font-size:18px;
letter-spacing:2px;
text-transform:uppercase;
display:inline-block;
text-align:center;
width:270px;
font-weight:bold;
padding:14px 0px;
border:3px solid $second;
border-radius:2px;
position:relative;
box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
z-index:2;
&:before {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
position:absolute;
top:0;
left:50%;
right:50%;
bottom:0;
opacity:0;
content:'';
background-color:$second;
z-index:-1;
}
&:hover {
&:before {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}
}
&:focus {
&:before {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}
}
}
Así es como quedaría nuestro bóton animado en css3.
See the Pen Botones Animados en CSS sin JavaScript by Antonio José (@ajmorales73) on CodePen.
Si te gustó déjame tu like, comparte con tus amigos en las redes sociales, y si tienes cualquier duda, o sugerencia me la dejes en los comentarios. ¡Gracias!
¿Quieres poner texto detrás de un video? Aprende cómo con CapCut en este sencillo tutorial…
Aprende a crear voces con IA sorprendentemente reales para vídeos, podcasts y más. Lee nuestro…
TikTok se reinventa con TikTok Notes: una app de fotos y estilo de vida. Conoce…
¡Descubre Haiper! La alternativa gratuita a Sora de OpenAI para crear vídeos increíbles. Fácil de…
¿Buscas una alternativa a ChatGPT? Mistral AI y su chatbot Le Chat ofrecen una experiencia…
Más que un resumen: Adobe AI Assistant te ayuda a navegar y comprender PDFs con…
Esta página utiliza cookies para mejorar su rendimiento