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);
}
Para aplicarlo al botón leer mas. Donde debemos incluir el código?
Gracias
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 🙂
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?
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.