Change color of call-to-action button

  • Author
  • #1413872

    Hello, I have the custom design update and I have tried to change the color of the call-to-action button. I wrote this as the code:

    .call-to-action a.button, #featured .read-more a {
    background-color: #a1a1ff;
    font-size: 18px;
    padding: 15px;

    I can “see” the background color that I specified in the “inspect element” section, but it doesn’t show up on the web page. Can you please help me with this? Thank you!

    The blog I need help with is



    The site is set to private. :(


    @internationalmountainconnection, since the original CSS uses the “background” declaration instead of “background-color” use background. I’ve also included the rule to change the “hover” color as well in case you want to change that to a different color.

    .call-to-action a.button, #featured .read-more a {
    background: #a1a1ff;
    font-size: 18px;
    padding: 15px;
    .call-to-action a.button:hover, #featured .read-more a:hover {
    background: #ff0000;

    Thank you so much! And thank you for including the CSS for the “hover” color.

    I didn’t realize that just “background” was ever used. Rookie mistake! I will be sure to go back and check the original code next time.

    I appreciate your help!


    You are welcome and no problems. The background shorthand declaration is being used more and more because it can contain a host of declarations all in one place, which helps to keep CSS file sizes down. That can be particularly important as CSS files larger due to more complex designs.


    Good to know! I will keep that in mind.

The topic ‘Change color of call-to-action button’ is closed to new replies.