Cerrar video

10 botones creativos con increíbles efectos hover para tus sitios web creados con divi

por | Dic 22, 2020 | Tutorial gratuito | 4 Comentarios

Si ya eres usuario de divi desde hace mucho o poco tiempo sabrás que con divi tenemos la posibilidad de insertar botones a través del “módulo botón” que viene por defecto con el constructor visual. Este módulo es excelente para insertar botones en cualquier parte de nuestro de forma muy fácil.

Cómo todos los módulos que incluye divi este “módulo botón” viene con su pestaña de personalización más conocida como “diseño”, desde esta pestaña podemos escoger una tipografía, cambiar el color en su estado normal y hover, jugar con el tamaño, separación, en fin, tenemos varias opciones de personalización. ¿Pero qué pasa si queremos agregar un efecto de animación al pasar el cursor o en su estado hover? Es aquí dónde nos vemos un poco límitados, por tal motivo, en este tutorial gratuito te mostraré cómo insertar botones personalizados con increíbles efectos hover en cualquier sitio web creado con divi, de esta manera aumentaras la personalización y le darás un “toque” diferente a tus sitios web creados con divi.

En total vamos a insertar 10 diferentes estilos de botones, esto lo haremos con pequeños fragmentos de código CSS que solamente vas a tener que copiar y pegar en un módulo texto. La verdad todo será super fácil, intuitivo y rápido que estoy seguro no tendrás ningún problema para colocar estos increíbles botones.

Yo te voy a enlistar los códigos acá abajo de todos estos botones y lo que tienes que hacer es solamente seguir los pasos que realizo en el video tutorial para que aprendas a colocarlos. Créeme que solamente necesitarás ver una vez el video tutorial y la próxima vez que necesites incrustas estos botones ya lo harás tan rápido que no necesitarás ni si quiera darle play al video.

Entonces, aquí los te dejo los fragmentos:

1. BOTÓN SLIDE LEFT

HTML:

<a href="#" class="ov-btn-slide-left">BTN SLIDE LEFT</a>

CSS:

/*** ESTILOS BOTÓN SLIDE LEFT ***/
.ov-btn-slide-left {
  background: #fff; /* color de fondo */
  color: #4741d7; /* color de fuente */
  border: 2px solid #4741d7; /* tamaño y color de borde */
  padding: 16px 20px;
  border-radius: 3px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-slide-left:hover {
  color: #fff; /* color de fuente hover */
}
.ov-btn-slide-left::after {
  content: "";
  background: #4741d7; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  top: 0;
  bottom: 0;
  left: -100%;
  right: 100%;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
.ov-btn-slide-left:hover::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

 

2. BOTÓN SLIDE RIGHT

HTML:

<a href="#" class="ov-btn-slide-right">BTN SLIDE RIGHT</a>

CSS:

/*** ESTILOS BOTÓN SLIDE RIGHT ***/
.ov-btn-slide-right {
  background: #fff; /* color de fondo */
  color: #4741d7; /* color de fuente */
  border: 2px solid #4741d7; /* tamaño y color de borde */
  padding: 16px 20px;
  border-radius: 3px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-slide-right:hover {
  color: #fff; /* color de fuente hover */
}
.ov-btn-slide-right::after {
  content: "";
  background: #4741d7; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  top: 0;
  bottom: 0;
  left: 100%;
  right: -100%;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
.ov-btn-slide-right:hover::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

 

3. BOTÓN SLIDE TOP

HTML:

<a href="#" class="ov-btn-slide-top">BTN SLIDE TOP</a>

CSS:

/*** ESTILOS BOTÓN SLIDE TOP ***/
.ov-btn-slide-top {
  background: #fff; /* color de fondo */
  color: #4741d7; /* color de fuente */
  border: 2px solid #4741d7; /* tamaño y color de borde */
  padding: 16px 20px;
  border-radius: 3px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-slide-top:hover {
  color: #fff; /* color de fuente hover */
}
.ov-btn-slide-top::after {
  content: "";
  background: #4741d7; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  left: 0;
  right: 0;
  top: -100%;
  bottom: 100%;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
.ov-btn-slide-top:hover::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

 

4. BOTÓN SLIDE BOTTOM

HTML:

<a href="#" class="ov-btn-slide-bottom">BTN SLIDE BOTTOM</a>

CSS:

/*** ESTILOS BOTÓN SLIDE BOTTOM ***/
.ov-btn-slide-bottom {
  background: #fff; /* color de fondo */
  color: #4741d7; /* color de fuente */
  border: 2px solid #4741d7; /* tamaño y color de borde */
  padding: 16px 20px;
  border-radius: 3px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-slide-bottom:hover {
  color: #fff; /* color de fuente hover */
}
.ov-btn-slide-bottom::after {
  content: "";
  background: #4741d7; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  left: 0;
  right: 0;
  top: 100%;
  bottom: -100%;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
.ov-btn-slide-bottom:hover::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

 

5. BOTÓN SLIDE CLOSE

HTML:

<a href="#" class="ov-btn-slide-close">BTN SLIDE CLOSE</a>

CSS:

/*** ESTILOS BOTÓN SLIDE CLOSE ***/
.ov-btn-slide-close {
  background: #fff; /* color de fondo */
  color: #4741d7; /* color de fuente */
  border: 2px solid #4741d7; /* tamaño y color de borde */
  padding: 16px 20px;
  border-radius: 3px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-slide-close:before, .ov-btn-slide-close:after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: -50%;
  background-color: #4741d7; /* color de fondo hover */
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ov-btn-slide-close:after {
  left: 100%;
}
.ov-btn-slide-close:hover {
  color: #fff; /* color de fuente hover */
}
.ov-btn-slide-close:hover:before {
  left: 0;
}
.ov-btn-slide-close:hover:after {
  left: 50%;
}

 

6. BOTÓN GROW BOX

HTML:

<a href="#" class="ov-btn-grow-box">BTN GROW BOX</a>

CSS:

/*** ESTILOS BOTÓN GROW BOX ***/
.ov-btn-grow-box {
  background: #fff; /* color de fondo */
  color: #4741d7; /* color de fuente */
  border: 2px solid #4741d7; /* tamaño y color de borde */
  padding: 16px 20px;
  border-radius: 3px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-grow-box:hover {
  color: #fff;/* color de fuente hover */
}
.ov-btn-grow-box::after {
  content: "";
  background: #4741d7; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: scale(0, 0);
  transition: all 0.3s ease;
}
.ov-btn-grow-box:hover::after {
  transition: all 0.3s ease-out;
  transform: scale(1, 1);
}

 

7. BOTÓN GROW ELLIPSE

HTML:

<a href="#" class="ov-btn-grow-ellipse">BTN GROW ELLIPSE</a>

CSS:

/*** ESTILOS BOTÓN GROW ELLIPSE ***/
.ov-btn-grow-ellipse {
  background: #fff; /* color de fondo */
  color: #4741d7; /* color de fuente */
  border: 2px solid #4741d7; /* tamaño y color de borde */
  padding: 16px 20px;
  border-radius: 3px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-grow-ellipse:hover {
  color: #fff;/* color de fuente hover */
}
.ov-btn-grow-ellipse::after {
  content: "";
  background: #4741d7; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  border-radius: 50%;
  left: -50%;
  right: -50%;
  top: -150%;
  bottom: -150%;
  transform: scale(0, 0);
  transition: all 0.4s ease;
}
.ov-btn-grow-ellipse:hover::after {
  transition: all 0.6s ease-out;
  transform: scale(1, 1);
}

 

8. BOTÓN GROW SKEW

HTML:

<a href="#" class="ov-btn-grow-skew">BTN GROW SKEW</a>

CSS:

/*** ESTILOS BOTÓN GROW SKEW ***/
.ov-btn-grow-skew {
  background: #fff; /* color de fondo */
  color: #4741d7; /* color de fuente */
  border: 2px solid #4741d7; /* tamaño y color de borde */
  padding: 16px 20px;
  border-radius: 3px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-grow-skew:hover {
  color: #fff;/* color de fuente hover */
}
.ov-btn-grow-skew::after {
  content: "";
  background: #4741d7; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.3s ease;
}
.ov-btn-grow-skew:hover::after {
  transition: all 0.3s ease-out;
  transform: skewX(-45deg) scale(1, 1);
}

 

9. BOTÓN GROW SKEW REVERSE

HTML:

<a href="#" class="ov-btn-grow-skew-reverse">BTN GROW SKEW</a>

CSS:

/*** ESTILOS BOTÓN GROW SKEW REVERSE ***/
.ov-btn-grow-skew-reverse {
  background: #fff; /* color de fondo */
  color: #4741d7; /* color de fuente */
  border: 2px solid #4741d7; /* tamaño y color de borde */
  padding: 16px 20px;
  border-radius: 3px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-grow-skew-reverse:hover {
  color: #fff;/* color de fuente hover */
}
.ov-btn-grow-skew-reverse::after {
  content: "";
  background: #4741d7; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(45deg) scale(0, 1);
  transition: all 0.3s ease;
}
.ov-btn-grow-skew-reverse:hover::after {
  transition: all 0.3s ease-out;
  transform: skewX(45deg) scale(1, 1);
}

 

10. BOTÓN GROW SPIN

HTML:

<a href="#" class="ov-btn-grow-spin">GROW SPIN</a>

CSS:

/*** ESTILOS BOTÓN GROW SPIN ***/
.ov-btn-grow-spin {
  background: #fff; /* color de fondo */
  color: #4741d7; /* color de fuente */
  border: 2px solid #4741d7; /* tamaño y color de borde */
  padding: 16px 20px;
  border-radius: 3px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-grow-spin:hover {
  color: #fff;/* color de fuente hover */
}
.ov-btn-grow-spin::after {
  content: "";
  background: #4741d7; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: scale(0, 0) rotate(-180deg);
  transition: all 0.3s ease;
}
.ov-btn-grow-spin:hover::after {
  transition: all 0.3s ease-out;
  transform: scale(1, 1) rotate(0deg);
}

4 Comentarios

  1. Guzman

    Para aplicarlo al botón leer mas. Donde debemos incluir el código?
    Gracias

    Responder
    • Oscar Viedma

      Hola Guzman, habrá que inspeccionar la clase del botón “Leer más” y en los estilos CSS reemplazar la clase “ov-btn-slide” por la de leer más 🙂

      Responder
  2. AURA

    Hola Oscar, cómo estás? Los botones me quedaron súper chéveres pero al momento de darles click me envía arriba de la página, a pesar de que tenga un enlace de wsp. ¿Qué estaré haciendo mal?

    Responder
    • Oscar Viedma

      Hola Aura debes reemplazar el signo numeral (#) por la url. Si no se refleja el cambio puede ser tu cache o el enlace no es correcto.

      Saludos.

      Responder

Enviar un comentario

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

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$6 USD / mes

Pin It on Pinterest