Button Classes

Add global buttons to Elementor with these classes

Don’t forget to change the color codes for the ones that have that description
				
					<style>

/* Main animation on all buttons */
.elementor-button{
     transition: transform 0.4s;
}
.elementor-button:hover{
     transform: translateX(7px);
     filter: brightness(95%);
}
/* Botón Grande Color */
.button-big-color .elementor-button{
	font-family: var(--e-global-typography-accent-font-family);
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    background-color: var(--e-global-color-tyrian_purple);
    color: var(--e-global-color-white);
    padding: 1rem 3rem;
    border: solid 2px var(--e-global-color-tyrian_purple);
    border-radius: 50px;
}

.button-big-color .elementor-button-icon {
    fill: var(--e-global-color-white);
}

/* Botón Grande Blanco */
.button-big-white .elementor-button{
	font-family: var(--e-global-typography-accent-font-family);
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    background-color: var(--e-global-color-white);
    color: var(--e-global-color-tyrian_purple);
    padding: 1rem 3rem;
    border: solid 2px var(--e-global-color-tyrian_purple);
    border-radius: 50px;
}

.button-big-white .elementor-button-icon {
    fill: var(--e-global-color-tyrian_purple);
}

/* Botón Grande Transparente */
.button-big-transparent .elementor-button{
	font-family: var(--e-global-typography-accent-font-family);
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    background-color: transparent;
    color: var(--e-global-color-tyrian_purple);
    padding: 1rem 3rem;
    border: solid 2px var(--e-global-color-tyrian_purple);
    border-radius: 50px;
}

.button-big-transparent .elementor-button-icon {
    fill: var(--e-global-color-tyrian_purple);
}


/* Botón Chico Color */
.button-small-color .elementor-button{
	font-family: var(--e-global-typography-accent-font-family);
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    background-color: var(--e-global-color-tyrian_purple);
    color: var(--e-global-color-white);
    padding: 0.4rem 2rem;
    border: solid 2px var(--e-global-color-tyrian_purple);
    border-radius: 50px;
}

.button-small-color .elementor-button-icon {
    fill: var(--e-global-color-white);
}


/* Botón Chico Blanco */
.button-small-white .elementor-button{
	font-family: var(--e-global-typography-accent-font-family);
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    background-color: var(--e-global-color-white);
    color: var(--e-global-color-tyrian_purple);
    padding: 0.4rem 2rem;
    border: solid 2px var(--e-global-color-tyrian_purple);
    border-radius: 50px;
}

.button-small-white .elementor-button-icon {
    fill: var(--e-global-color-tyrian_purple);
}

/* Botón Chico Transparente */
.button-small-transparent .elementor-button{
	font-family: var(--e-global-typography-accent-font-family);
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    background-color: transparent;
    color: var(--e-global-color-tyrian_purple);
    padding: 0.4rem 2rem;
    border: solid 2px var(--e-global-color-tyrian_purple);
    border-radius: 50px;
}

.button-small-transparent .elementor-button-icon {
    fill: var(--e-global-color-tyrian_purple);
}

</style>