Open Forum

Has anyone been able to apply CSS to Primary and Secondary buttons using the CSS Classes section in the Theme builder? I'm trying to change the color of the buttons when hovering over them, and for some reason, applying the CSS class has never worked for me. It does work when I insert CSS and HTML in the code widgets, but it would be nice if I can just apply it from the theme builder. 

Here's an example of what I'm inserting:

/*Button 1 Link*/
a.button1:link, a.button1:visited {
  background: #011e41;
  color: #ffffff;
  border: 2px solid #011E41;
  border-radius: 40px;
  font-family: basis-grotesque-regular-pro,sans-serif;
  font-size: 20px;
  text-align: center;
  padding: 10px 25px;
  text-decoration: none;
  display: inline-block;
}

a.button1:hover, a.button1:active {
  border: 2px solid #011E41;
  background: #a3e8ff;
  color: #011e41;
  border-radius: 40px;
  transition: 0.5s ease-in-out;
}

Thank you in advance! 

Hi Etsuko,

Hope you are well!

I got your query check by our HTML team and they advised that after all the background color code that you have mentioned, you need mark all the color codes as important by adding !important after the color code for all. Once that is done, the color will change.

You can refer to the following link to see how to mark the color code as important :

https://www.w3schools.com/css/css_important.asp

If you still need assistance with this, you can contact our HTML team directly at 866-318-4357 (US & Canada) > Press 1 for Event cloud > Press 1 for Setting Up Event Event > Press 1 for Events > Press 2 for Web Design & HTML  and a HTML except will assist you with this.

I hope this helps.

Has anyone been able to apply CSS to Primary and Secondary buttons using the CSS Classes section in the Theme builder? I'm trying to change the color of the buttons when hovering over them, and for some reason, applying the CSS class has never worked for me. It does work when I insert CSS and HTML in the code widgets, but it would be nice if I can just apply it from the theme builder. 

Here's an example of what I'm inserting:

/*Button 1 Link*/
a.button1:link, a.button1:visited {
  background: #011e41;
  color: #ffffff;
  border: 2px solid #011E41;
  border-radius: 40px;
  font-family: basis-grotesque-regular-pro,sans-serif;
  font-size: 20px;
  text-align: center;
  padding: 10px 25px;
  text-decoration: none;
  display: inline-block;
}

a.button1:hover, a.button1:active {
  border: 2px solid #011E41;
  background: #a3e8ff;
  color: #011e41;
  border-radius: 40px;
  transition: 0.5s ease-in-out;
}

Thank you in advance! 

@Raashi Semwal Khati

Great. That worked!

Hi Etsuko,

Hope you are well!

I got your query check by our HTML team and they advised that after all the background color code that you have mentioned, you need mark all the color codes as important by adding !important after the color code for all. Once that is done, the color will change.

You can refer to the following link to see how to mark the color code as important :

https://www.w3schools.com/css/css_important.asp

If you still need assistance with this, you can contact our HTML team directly at 866-318-4357 (US & Canada) > Press 1 for Event cloud > Press 1 for Setting Up Event Event > Press 1 for Events > Press 2 for Web Design & HTML  and a HTML except will assist you with this.

I hope this helps.

Has anyone been able to apply CSS to Primary and Secondary buttons using the CSS Classes section in the Theme builder? I'm trying to change the color of the buttons when hovering over them, and for some reason, applying the CSS class has never worked for me. It does work when I insert CSS and HTML in the code widgets, but it would be nice if I can just apply it from the theme builder. 

Here's an example of what I'm inserting:

/*Button 1 Link*/
a.button1:link, a.button1:visited {
  background: #011e41;
  color: #ffffff;
  border: 2px solid #011E41;
  border-radius: 40px;
  font-family: basis-grotesque-regular-pro,sans-serif;
  font-size: 20px;
  text-align: center;
  padding: 10px 25px;
  text-decoration: none;
  display: inline-block;
}

a.button1:hover, a.button1:active {
  border: 2px solid #011E41;
  background: #a3e8ff;
  color: #011e41;
  border-radius: 40px;
  transition: 0.5s ease-in-out;
}

Thank you in advance! 

Has anyone been able to apply CSS to Primary and Secondary buttons using the CSS Classes section in the Theme builder? I'm trying to change the color of the buttons when hovering over them, and for some reason, applying the CSS class has never worked for me. It does work when I insert CSS and HTML in the code widgets, but it would be nice if I can just apply it from the theme builder. 

Here's an example of what I'm inserting:

/*Button 1 Link*/
a.button1:link, a.button1:visited {
  background: #011e41;
  color: #ffffff;
  border: 2px solid #011E41;
  border-radius: 40px;
  font-family: basis-grotesque-regular-pro,sans-serif;
  font-size: 20px;
  text-align: center;
  padding: 10px 25px;
  text-decoration: none;
  display: inline-block;
}

a.button1:hover, a.button1:active {
  border: 2px solid #011E41;
  background: #a3e8ff;
  color: #011e41;
  border-radius: 40px;
  transition: 0.5s ease-in-out;
}

Thank you in advance! 

Has anyone been able to apply CSS to Primary and Secondary buttons using the CSS Classes section in the Theme builder? I'm trying to change the color of the buttons when hovering over them, and for some reason, applying the CSS class has never worked for me. It does work when I insert CSS and HTML in the code widgets, but it would be nice if I can just apply it from the theme builder. 

Here's an example of what I'm inserting:

/*Button 1 Link*/
a.button1:link, a.button1:visited {
  background: #011e41;
  color: #ffffff;
  border: 2px solid #011E41;
  border-radius: 40px;
  font-family: basis-grotesque-regular-pro,sans-serif;
  font-size: 20px;
  text-align: center;
  padding: 10px 25px;
  text-decoration: none;
  display: inline-block;
}

a.button1:hover, a.button1:active {
  border: 2px solid #011E41;
  background: #a3e8ff;
  color: #011e41;
  border-radius: 40px;
  transition: 0.5s ease-in-out;
}

Thank you in advance! 

Has anyone been able to apply CSS to Primary and Secondary buttons using the CSS Classes section in the Theme builder? I'm trying to change the color of the buttons when hovering over them, and for some reason, applying the CSS class has never worked for me. It does work when I insert CSS and HTML in the code widgets, but it would be nice if I can just apply it from the theme builder. 

Here's an example of what I'm inserting:

/*Button 1 Link*/
a.button1:link, a.button1:visited {
  background: #011e41;
  color: #ffffff;
  border: 2px solid #011E41;
  border-radius: 40px;
  font-family: basis-grotesque-regular-pro,sans-serif;
  font-size: 20px;
  text-align: center;
  padding: 10px 25px;
  text-decoration: none;
  display: inline-block;
}

a.button1:hover, a.button1:active {
  border: 2px solid #011E41;
  background: #a3e8ff;
  color: #011e41;
  border-radius: 40px;
  transition: 0.5s ease-in-out;
}

Thank you in advance!