Archived topic
Customising footer button colour
3 replies · Started by Maria on August 3, 2017
Hi, I'd like to know how to change colour on this widget's button. See green section "Let's get started…" https://prettynicewebsite.com/coastalpridebuilders
No matter what I do, the grey doesn't change. This is the CSS I have added.
I've checked the Colour options on the Pro theme, but no luck. Nothing happens. Obviously, this is a CSS styling thing, which I am aiming to do better each time I use GP.
Can you please have a look at my CSS below? I think there are some unnecessary elements there, so your advise will be greatly appreciated. Thanks again for creating an awesome product!
}
.footer-widgets {
background-color: #8dc63f;
clear: both;
font-size: 24px;
font-size: 2.4rem;
padding: 50px 0;
text-align: center;
}
.footer-widgets,
.footer-widgets a,
.footer-widgets a:focus,
.footer-widgets a:hover {
color: #fff !important;
text-decoration: none;
}
.footer-widgets .widget {
margin-bottom: 20px;
}
.footer-widgets .widget-title {
color: #fff;
font-size: 14px;
font-size: 2.8rem;
}
.footer-widgets a.button:hover,
.footer-widgets a.button:focus,
.home-odd a.button:hover,
.home-odd a.button:focus {
background-color: #fff;
color: #000 !important;
}
.footer-widgets a.button,
.footer-widgets button,{
font-size: 14px;
font-size: 1.4rem;
margin-top: 20px;
padding: 10px 10px;
text-decoration: none;
}
Hi there,
Give this a shot:
.footer-widgets a.button {
background: #fff;
color: #222 !important;
}
.footer-widgets a.button:hover {
background: #222;
color: #fff !important;
}
It worked! Thanks once again for your help.
You're welcome :)