css buttons inherit active and hover color of default

[wildwebwest]

Hi. I've got a client who is overzealous about styling at the website: http://bodymassagewellnessspa.com On this page: http://bodymassagewellnessspa.com/day-spa-services/ a grey box sits near the bottom, before the footer with text and 2 buttons. I've tried everything to make those buttons have white text. But it seems the colors are defaulting to the inherited active links and hover links of the Outreach Pro Blue template colors. I don't want the default colors of the rest of the website to change. But I'm reaching out to see if anyone knows what I'm doing wrong so that I can get this pesky little css task behind me.

My CSS code is the problem but I've just not been able to figure out the solution. Can anyone provide tips? Thanks much.

/* #Buttons
================================================== */
.grey-box-button {

color: white !important;
background-image: linear-gradient(top, #579ec2 0%, #152f52 100%);
background-image: -o-linear-gradient(top, #579ec2 0%, #152f52 100%);
background-image: -moz-linear-gradient(top, #579ec2 0%, #152f52 100%);
background-image: -webkit-linear-gradient(top, #579ec2 0%, #152f52 100%);
background-image: -ms-linear-gradient(top, #579ec2 0%, #152f52 100%);
border:1px solid #222;
display: inline;
cursor: pointer;
font-size: 12px;
font-weight: 400;
padding: 10px 20px;
text-transform: uppercase;
max-width: 250px;
margin-right: auto;
margin-left: auto;
margin-bottom: 5px;
text-align: center;
}

grey-box-button:hover,

.grey-box-button:hover {

background-color: #152f52;

color: #fff important;

}

---

Wild Web West, LLC
#IHeartGenesis

http://

[wildwebwest]

I found a work around which seems appropriate:

Instead of using the grey-box-button class I've referenced the .button class which is inheriting the white text.

<div class="reading-box">
<h3>DENVER'S LEADING MED SPA & THERAPEUTIC WELLNESS CENTER SINCE 1986</h3>
<h5>We provide a wide range of health and wellness programs that are individually tailored and results driven.</h5>
Book Online Now</p>
Instant Gift Certificates
</div>
The text on the buttons are white on active and hover.

Is there a disadvantage to use this solution <a class="button" .... ?

---

Wild Web West, LLC
#IHeartGenesis

[wildwebwest]

I'm pretty sure I've resolved this:
<div class="bordera"></div>
<div class="reading-box">
<h3>DENVER'S LEADING MED SPA & THERAPEUTIC WELLNESS CENTER SINCE 1986</h3>
<h5>We provide a wide range of health and wellness programs that are individually tailored and results driven.</h5>
Book Online Now Instant Gift Certificates
</div>

---

Wild Web West, LLC
#IHeartGenesis

[Author]

Posts