Change colour of all buttons

• 

  helengorman · Member · Jul 25, 2020 at 2:41 pm

  • Copy link
  • Add topic to favorites

  I am using the Balasana theme and am trying to change all the buttons on the site to orange instead of green. I’ve added the following custom CSS:

  button {
  background: #F74C08;
  color: #ffffff;
  }

  However it has changed some buttons (eg both the ones on the blog page) but not others (such as the “menu” button on a mobile phone display, and the one on the Contact page).

  Any help appreciated, thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  slantedplanet · Member · Jul 25, 2020 at 9:18 pm

  • Copy link

  Hello!

  For the mobile menu button:

  #toggle-menu.button {
  	background-color: orange;
  }

  For the contact form submit button:

  .wp-block-button__link {
      background-color: orange;
  }
  
  .wp-block-button__link:hover {
      background-color: blue;
  }

  If you don’t want the color of the submit button to change on hover, use the same color for all of the CSS code for this button. Either way, you will need to code for the hover state to completely replace the default (green) button color.

  You probably recognize that I am using generic color names (orange and blue) that you can replace with your color preferences.

• 

  helengorman · Member · Jul 26, 2020 at 9:53 am

  • Copy link

  Thanks! That’s worked for the menu button but it didn’t seem to make any difference to the Contact form button when I put it in the Customizer.

• 

  slantedplanet · Member · Jul 26, 2020 at 4:13 pm

  • Copy link

  Hello again! Thanks for your follow up post.

  Let us know if this works better for you:

  /* contact form submit button */
  button.wp-block-button__link {
  background-color: orange;
  }

  button.wp-block-button__link:hover {
  background-color: blue;
  }

• 

  slantedplanet · Member · Jul 26, 2020 at 4:15 pm

  • Copy link

  re-posting with CSS more properly formatted:

  /* contact form submit button */
  button.wp-block-button__link {
      background-color: orange;
  }
  
  button.wp-block-button__link:hover {
      background-color: blue;
  }

• 

  helengorman · Member · Jul 27, 2020 at 8:10 am

  • Copy link

  That’s worked! Thank you so much!

• 

  helengorman · Member · Jul 27, 2020 at 8:11 am

  • Copy link

  Just posting again so I can mark this resolved – thanks again!