Need help? Check out our Support site, then


Change color of call-to-action button

  1. 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 internationalmountainconnection.com.

  2. The site is set to private. :(

  3. @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;
    }
  4. 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!

  5. 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.

  6. Good to know! I will keep that in mind.

Topic Closed

This topic has been closed to new replies.

About this Topic

  • Started 11 months ago by internationalmountainconnection
  • This topic has 6 posts
  • 3 posters
  • Latest reply from internationalmountainconnection
  • This topic is resolved
  • RSS feed for this topic