Dale un estilo diferente a tus botones de Elementor

Tabla de Contenido

Hoy traigo para ustedes un conjunto de estilos que podemos aplicar en los elementos de tipo Botón de Elementor, son muy sencillos de implementar y le darán a tu sitio web un toque mas dinámico.

¿Como implementar estos botones?

Si tienes Elementor PRO:

Si cuentas con la versión paga de Elementor PRO puedes añadir un elemento de tipo botón, luego click a la pestaña de avanzado y te vas a la última opción Custom CSS. En ese recuadro es donde pegaremos el código css que hayas escogido de los de abajo.

Para cambiar el color en el código solo tienes que irte hasta donde dice: «background» y cambiar por el hexadecimal que quieras.

También puedes usar el código de manera mas global utilizando el personalizador de tu tema y trabajando con clases, de esta manera no tendrás que pegar el código en cada botón, te lo explico a continuación.

Opción si tienes Elementor FREE

Como ya sabrás, si no cuentas con la versión PRO de elementor no tendrás acceso al Custom CSS para incluir el código de tu botón, pero siempre podrás hacerlo desde el personalizador CSS de tu tema, en mi caso uso Generate Press y solo hay que adicionar un par de pasos para tener nuestro botón.

Lo primero es darle al elemento una clase, eso lo hacemos en Avanzado, Classes CSS, colocamos la clase, por ejemplo: «btn-1». Luego nos vamos a personalizar nuestro tema, CSS adicional, y pegamos el código del botón que nos haya gustado.

!IMPORTANTE, es necesario cambiar la palabra «selector» por la clase que acabamos de crear, en este ejemplo seria por «btn-1». Con eso bastará para hacer funcionar el código en todos los botones a los cuales les pongas esa clase, recuerda que para variar las animaciones y/o colores deberás crear una clase diferente para cada tipo de botón y agregarlo en el personalizador css de tu tema.

Botones

Botón con barrido en :hover

selector .elementor-button {
	position: relative;
        z-index: 1;
}
selector .elementor-button:before {
	content: '';
	position: absolute;
	height: 100%;
	top: 0;
	right: 0;
	width: 0;
	z-index: -1;
	background: #F7CA18;
	transition: all 0.4s;
}
selector .elementor-button:hover:before {
	left: 0;
	width: 100%;
}
selector .elementor-button {
	position: relative;
        z-index: 1;
}
selector .elementor-button:before {
	content: '';
	position: absolute;
	height: 0;
	bottom: 0;
        left:0;
	width: 100%;
	z-index: -1;
	background: #F7CA18;
	transition: all 0.4s;
}
selector .elementor-button:hover:before {
    top:0;
	height: 100%;
	width: 100%;
}
selector .elementor-button {
	position: relative;
        z-index: 1;
}
selector .elementor-button:before {
	content: '';
	position: absolute;
	height: 0;
	bottom:0;
	right: 0;
	width: 0;
	z-index: -1;
	background: #F7CA18;
	transition: all 0.4s;
}
selector .elementor-button:hover:before {
    top:0;
    height: 100%;
	left: 0;
	width: 100%;
}
selector .elementor-button {
	position: relative;
        z-index: 1;
}

selector .elementor-button:before {
	content: '';
	position: absolute;
	height: 100%;
	top: 0;
	right: 0;
	width: 0;
	z-index: -1;
	background: #F7CA18;
	transition: all 0.7s;
}

selector .elementor-button:after {
	content: '';
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	width: 0;
	z-index: -1;
	background: #F7CA18;
	transition: all 0.7s;
}

selector .elementor-button:hover:before, selector .elementor-button:hover:after {
	width: 50%;
}

Botón estilo retro

!IMPORTANTE, debes colocarle un fondo transparente a tu botón, en la pestaña de estilos, busca la opción tipo de fondo y lo colocas transparente, de lo contrario no se vera el color del código.

selector .elementor-button {
	position: relative;
}
selector .elementor-button:before {
	content: '';
	position: absolute;
    height: 100%;
	top: 7px;
    left: 7px;
	width: 100%;
	z-index: -1;
	background: #f7ca18a1;
	transition: all 0.2s;
}

selector .elementor-button:hover:before {
    top:0;
    left:0;
}
¿Te sirvió? ¡Compártelo!
Facebook
Twitter
LinkedIn
Reddit
WhatsApp
¿Te sirvió? ¡Compártelo!
Facebook
Twitter
LinkedIn
Reddit
WhatsApp
Scroll al inicio