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.
Hola Oscar, muchas gracias por el tutuorial. Mi pregunta es ¿Esto se puede hacer desde el constructor visual? y no haciendo el botón con HTML. ¿Cómo puedo hacerlo?
Hola José, estos efectos deben realizarse desde el constructor visual pero con un módulo código. No es posible hacerlos con el módulo botón, bueno podría ser posible pero necesita código personalizado. Saludos.
Hola Oscar, aplique el mismo diseño 4 veces sobre una misma fila, pero necesito un diseño diferente en cada uno, pero no puedo agregar la misma línea de código. ¿ Como le puedo hacer?
Hola Ernesto, deberías asignarle una nueva clase única a cada uno de los botones y darle estilos a través de esa clase.
Hola Oscar gracias por los botones quisiera poner un mismos botón 6 veces pero diferente color, ¿Cómo podría modificar el CSS para poder hacerlo?
Hola Juan, solo debes agregarle otra nueva clase al html del botón, por ejemplo para el primer botón:
Viene con la clase: class=»ov-btn-slide-left»
Entonces delante de la clase que ya tiene le agregas otra clase:
class=»ov-btn-slide-left boton-color-rojo»
Y en código CSS agregas las propiedades:
.boton-color-rojo {
background-color: #ff0000 !important;
}
Hola Oscar, una consulta. Yo cree un boton vertical, «width: 2em;
height: 15rem;» con esas dimensiones y no puedo hacer que el efecto skew cubra el boton total, solo cubre el medio del boton. He cambiado dimensiones pero sigue sin funcionarme, ayuda porfa
Hola Alex, ¿Por qué estás usando medidas relativas? Para los botones es mejor usar pixeles en lugar de em y rem.
Hola Oscar, muchas gracias por tu tutorial, inserte el código y todo bien con el botón, lo puedo ver y queda perfecto, pero cuando lo guardo y voy a revisar los cambios solo se ve reflejado el texto del código html. 🙁 ayuda please!
Hola Fabiola, para ser un tema de cache. Dirígete a Divi / Opciones del tema / Constructor / Avanzado / y deshabilita la Generación de Archivo CSS Estático… A ver si esto ayuda.
Excelente trabajo, felicidades. eso le da mas vida a mis paginas.
Gracias Dario, seguiremos creando más contenido.
Un abrazo 🙂