Resources

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

/* Main animation on all buttons */
.elementor-button{
     transition: transform 0.4s;}
.elementor-button:hover{
     transform: translateX(7px);
     filter: brightness(95%);}
/* Dark button*/
.button-dark .elementor-button{
    background-color: var(--e-global-color-primary );
    color: #FFFFFF;}
/* Light color (replace the e-global-color to your Site Settings color)*/
.button-light .elementor-button{
    background-color: var(--e-global-color-98f71a2 );  
    color: var(--e-global-color-primary );}
/* Accent 2 button (replace the e-global-color to your Site Settings color)*/
.button-accent-2 .elementor-button{
    background-color: var(--e-global-color-cdd8c27 );
    color: var(--e-global-color-primary );}
/* Outline button dark*/
.button-outline-dark .elementor-button{
    background-color: transparent;
    color: var(--e-global-color-primary );
    border-radius: 50px;
    box-shadow: inset 0px 0px 0px 1px var(--e-global-color-primary );}
	
/* Outline button light*/
.button-outline-light .elementor-button{
    background-color: transparent;
    color: white;
    border-radius: 50px;
    box-shadow: inset 0px 0px 0px 1px white;}