Change color of call-to-action button

  • Author
    Posts
  • #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 internationalmountainconnection.com.

    #1413957

    jcasta
    Member

    The site is set to private. :(

    #1413976

    @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;
    }
    #1414006

    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!

    #1414079

    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.

    #1414117

    Good to know! I will keep that in mind.

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