mayo 18, 2024

Animación de borde de botón al pasar el mouse | HTML y CSS

Vistas: 311Vistas: 312
Tiempo de lectura:2 Minuto, 26 Segundo

«Botón con animación de borde al pasar el mouse» es un nuevo concepto en la serie de animación de botones. Si visita muchos sitios web diferentes, es posible que haya visto muchas animaciones en los botones. También diseñaremos uno de esos efectos en este artículo como puedes ver en la imagen.

En este artículo, veremos cómo agregar una animación de borde a un botón. Para crear esta animación de botón, tomaremos una etiqueta de ‘botón’ HTML . Dentro del mismo botón, agregaremos cuatro etiquetas ‘span’ y escribiremos el valor del botón como ‘facebook’. Y ahora usaremos esas cuatro etiquetas ‘span’ como el borde del botón. Este borde mostrará el efecto de animación cuando pase el mouse sobre el botón y cuando quite el mouse, el borde desaparecerá.

Codigo HTML

Antes de escribir el código html, incluyamos algunos complementos importantes dentro del documento html.

<div class="botonhover">

<a href="#">Plantillas Plus
  <span></span>
  <span></span>
  <span></span>
  <span></span>
 </a>

</div>

 

Código CSS

Código CSS para crear animaciones. Este es un código de animación muy simple y básico de insertar’.

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');
.botonhover { 
text-align: center;
}
.botonhover a{
  text-decoration: none !important;
  display: inline-block;
  position: relative;
  color: #FFF;
  padding: 20px 40px;
  border-radius: 2px;
  background-color: #454ADE;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
}

.botonhover a:hover{
  background: black;
  transition: 0.5s;
  transition-delay: 1s;
}

.botonhover a span{
  position: absolute;
  display: block;
  background: black;
}

.botonhover a span:nth-child(1){
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 4px;
  transform: scaleX(0);
  transition: transform 0.24s;
  transform-origin: right;
}

.botonhover a:hover span:nth-child(1){
  transform: scaleX(1);
  transition: transform 0.24s;
  transform-origin: left;
}

.botonhover a span:nth-child(2){
  right: 0px;
  bottom: 0px;
  width: 4px;
  height: 100%;
  transform: scaleX(0);
  transition: transform 0.24s;
  transform-origin: top;
}

.botonhover a:hover span:nth-child(2){
  transform: scaleX(1);
  transition: transform 0.24s;
  transform-origin: bottom;
  transition-delay: 0.26s;
}

.botonhover a span:nth-child(3){
  top: 0px;
  right: 0px;
  width: 100%;
  height: 4px;
  transform: scaleX(0);
  transition: transform 0.24s;
  transform-origin: left;
}

.botonhover a:hover span:nth-child(3){
  transform: scaleX(1);
  transition: transform 0.24s;
  transform-origin: right;
  transition-delay: 0.36s;
}

.botonhover a span:nth-child(4){
  left: 0px;
  top: 0px;
  width: 4px;
  height: 100%;
  transform: scaleY(0);
  transition: transform 0.24s;
  transform-origin: bottom;
}

.botonhover a:hover span:nth-child(4){
  transform: scaleX(1);
  transition: transform 0.24s;
  transform-origin: top;
  transition-delay: 0.46s;
}
</style>

 

Tenga en cuenta que el CSS contiene la etiqueta de estilos, el cual simplemente puede copiar y hacer sus pruebas rápidamente.

Demostración

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
100 %

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *