Site logo

Archived topic

Customising footer button colour

3 replies · Started by Maria on August 3, 2017

Viewing posts 1–4 of 4

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 :)

This archived topic is closed to new replies.