Customize some full width buttons

Custom CSS to use buttons with different styles.

Another example: on the page

http://www.brunocover.it/CMS/wordpress/trikego/?page_id=2864

before the contact form there is a long button, I would like to make a custom css to change its color, border and colors on mouse over: custom css to have buttons with different styles, to be used according to the page and the colors of the page.

https://ibb.co/WxTgqqp

Thanks again for your support. Sincerely. Bruno

Thanks Mike for your suggestion: that’s exactly what I would like to understand and do. I would like to understand how to add a custom class to an element, using, as indicated in your image, CUSTOM CSS Class. I wish I could use this method where possible: create a class in quick css and use the class name in the developer settings, but I didn’t understand how to do it. I also looked at the guide

https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

Would you be kind enough to give me an example? Using for example the name “BLU”

https://postimg.cc/pp529Sn6

that I would put in the field indicated in your image (in the Developer Settings of my button element), how do I change the CSS that I put in my Enfold Child?

#BLU .main_color .avia-color-theme-color.avia-button {
background-color: #ffffff;
border-color: #ffffff;
border-style: solid;

}
#BLU .main_color .avia-color-theme-color.avia-button:hover {
background-color: #24305e;
border-color: #24305e;
border-style: solid;
color: #ffffff;
}
#BLU .main_color .avia-color-theme-color.avia-button > span.avia_iconbox_title {
color: #24305e;
}
#BLU .main_color .avia-color-theme-color.avia-button:hover > span.avia_iconbox_title {
color: #ffffff;
}

https://postimg.cc/5X3N1Cz4

I did some tests but to no avail. Would you be kind enough to help me again? Thanks for your patience. Best regards. Bruno

Hi Mike. Thanks for your support, you gave me the solutions. Be patient, only one problem remains. Here is the Custom Css Class .BGbiancoTXTblu

#top .main_color .BGbiancoTXTblu .avia-button {
background-color: #ffffff;
border-color: #ffffff;
border-style: solid;
}
#top .main_color .BGbiancoTXTblu .avia-button:hover {
background-color: #24305e;
border-color: #24305e;
border-style: solid;
color: #ffffff;
}
#top .main_color .BGbiancoTXTblu .avia-button > span.avia_iconbox_title {
color: #24305e;
}
#top .main_color .BGbiancoTXTblu .avia-button:hover > span.avia_iconbox_title {
color: #ffffff;
}

Moving the mouse over the button but out of the text, it’s perfect: the button turns blue and the writing white

https://postimg.cc/1fS8wFMk

But moving the mouse over the text, the button turns white, the blue border and the white text (and you don’t see it)

https://postimg.cc/Lnmsnp8R

What is missing to keep the blue mouse button over the text too?

PAGE LINK

Thanks Mike. Best regards. Bruno

Dear Mike, I modified the css by adding your last suggestions

#top .main_color .BGbiancoTXTblu .avia-button {
background-color: #ffffff;
border-color: #ffffff;
border-style: solid;
}
#top .main_color .BGbiancoTXTblu .avia-button:hover {
background-color: #24305e;
border-color: #24305e;
border-style: solid;
color: #ffffff;
}
#top .main_color .BGbiancoTXTblu .avia-button > span.avia_iconbox_title {
color: #24305e;
}
#top .main_color .BGbiancoTXTblu .avia-button:hover > span.avia_iconbox_title {
color: #ffffff;
}
#top .main_color .BGbiancoTXTblu .avia-button > span.avia_iconbox_title:hover {
color: #fff !important;
z-index: 0 !important;
}
#top .main_color .BGbiancoTXTblu > .avia-button > .avia-button:hover {
color: #fff !important;
background-color: #24305e !important;
}

but the button continues to give problems when the mouse passes over the text, continuing to go from blue to white and from white to blue, as in the video in example

http://www.brunocover.it/CMS/wordpress/trikego/TMP/button.mp4

I also tried adding

#top .main_color .BGbiancoTXTblu .avia-button:active {
background-color: #24305e;
border-color: #24305e;
border-style: solid;
color: #ffffff;
}

but the problem persists: moving the mouse over the text, the state of the button continues to change, from white to blue and from blue to white.

http://www.brunocover.it/CMS/wordpress/trikego/?page_id=2864

What is missing? Thanks a lot for your patience. Best regards. Bruno

I did it. If you need it, I opened you admin user. Thank you for your support.
The button should be white with blue writing and on mouseover change and turn blue with white writing.
I left the name of the class. If it were better for you, I could eliminate it. Let me know.

https://postimg.cc/kBrZcT1L

https://postimg.cc/ygHjRGYT

Thanks a lot Mike. Best regards. Bruno

Hi Mike. As always, your suggestions have solved my problem: thanks a lot for your support. Best regards. Bruno

Hi Rikard. You can close this topic. Thanks a lot. Best regards. Bruno