Change color of call-to-action button

internationalmountainconnection · Member · Aug 30, 2013 at 11:38 am
Copy link

Add topic to favorites
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: (visible only to logged in users)
jcasta · Member · Aug 30, 2013 at 1:35 pm
Copy link
The site is set to private. :(
thesacredpath · Member · Aug 30, 2013 at 5:37 pm
Copy link
@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;
}
```
internationalmountainconnection · Member · Aug 31, 2013 at 8:59 am
Copy link
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!
thesacredpath · Member · Sep 2, 2013 at 3:52 pm
Copy link
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.
internationalmountainconnection · Member · Sep 4, 2013 at 8:41 am
Copy link
Good to know! I will keep that in mind.

No items found.