CODEWITHSUNDEEP
htmlcsswebkitzurb-foundation
BardiaD
BardiaD

Reputation: 119

Foundation 5 button class breaks after click event (in webkit browsers)

This is my first time using a framework and I'm working with zurbs Foundation 5 framework.

I have tried to extend/overwrite the default .button class and am using that as my main button. Below is the the css for my custom.css file that is overwriting default Foundation 5 styles:

The CSS styles

.button {
font-family: 'Alegreya Sans','Helvetica Neue',Helvetica sans-serif;
background: rgb(238, 77, 13);
color: rgb(241, 227, 186);
border-radius: 30px;
padding: 10px 15px;
font-size: 80%;
margin-top: 10px;
}

.button:hover{
background: #46A18C;
}


The corresponding HTML elements:

<p>This is a description of the thing in the thing</p>
<a class="button" href="#">View Project</a>

The problem I seem to be having is only evident in webkit browsers (safari/chrome) where everything works perfectly on load. The issue only comes up after you click a link, which all are set to href="#" for now. Once a link is clicked, the text inside each button disappears, only to reappear on hover. Not sure if it's relevant but the Foundation styling for this link also includes a transition property that is set to background-color 300ms ease-out 0s

You can see an example here: http://www.kashmachine.ca/build

I'm not sure what's causing, I've gone through it through firebug, disabling styles 1 by 1 but nothing seems to fix it. Any/all suggestions would be fantastic. I'm a little new to web development, but this has really stumped me. Thanks again for any help.

Upvotes: 0

Views: 331

Answers (1)

Goombah
Goombah

Reputation: 2855

Your

a, a:visited {
color:#EE4D0D;
text-decoration:none;
}

have the same color as the background of your buttons..

Address your buttons like this:

a.button

So:

a.button {
font-family: 'Alegreya Sans','Helvetica Neue',Helvetica sans-serif;
background: rgb(238, 77, 13);
color: rgb(241, 227, 186);
border-radius: 30px;
padding: 10px 15px;
font-size: 80%;
margin-top: 10px;
}

a.button:hover{
background: #46A18C;
}

That should overwrite it..

Upvotes: 1

Related Questions