Override div style link color in css - html

Question

I'm placing a button (created by a css) in my html page.
Currently this button inherits the link color from the div.
I'm trying to override these link colors and make the button show a link in a different color.
I have created a button style in the css file like this, and I was pretty sure by specifying the link colors in the button, I would automatically override the div link colors.
.button {
display: inline-block;
padding: 0 14px;
margin: 8px 0 0;
height: 32px;
line-height: 32px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
text-decoration: none;
position: relative;
overflow: hidden;
vertical-align: top;
color: #fff;
background: #49b1fb;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #5196d5), color-stop(1, #49b1fb));
background: -ms-linear-gradient(bottom, #5196d5, #49b1fb);
background: -moz-linear-gradient(center bottom, #5196d5 0%, #49b1fb 100%);
border-bottom: 1px solid #4c8cc8;
link {text-decoration: none; color: #FFF;}
visited {text-decoration: none; color: #FFF;}
hover {text-decoration: none; color: #FFF;}
active {text-decoration: none; color: #FFF;}
}
I use the button like this:
<div id="widecontent">
<div id="content">
<div id="content-inner">
<div class="column_left">
<h2>Download</h2>Click below to download the app:
<br/>
Download
</div>
However, the link color of the button is the same as the div style.
The link colors as I have defined them in the css file don't show an effect.
What is the correct way to override the link color of the div / what am I doing incorrectly?

Answer 1

You should define it like this for hover for example:
.button {
display: inline-block;
padding: 0 14px;
margin: 8px 0 0;
height: 32px;
line-height: 32px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
text-decoration: none;
position: relative;
overflow: hidden;
vertical-align: top;
color: #fff;
background: #49b1fb;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #5196d5), color-stop(1, #49b1fb));
background: -ms-linear-gradient(bottom, #5196d5, #49b1fb);
background: -moz-linear-gradient(center bottom, #5196d5 0%, #49b1fb 100%);
border-bottom: 1px solid #4c8cc8;
}
.button:hover {
text-decoration: none;
color: #FFF;
}

Answer 2

you are confusing properties with pseudo-classes (:active/:hover and etc)
so you should use them outside of the rule, and not inside.
.button {
display: inline-block;
padding: 0 14px;
margin: 8px 0 0;
height: 32px;
line-height: 32px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
text-decoration: none;
position: relative;
overflow: hidden;
vertical-align: top;
color: #fff;
background: #49b1fb;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #5196d5), color-stop(1, #49b1fb));
background: -ms-linear-gradient(bottom, #5196d5, #49b1fb);
background: -moz-linear-gradient(center bottom, #5196d5 0%, #49b1fb 100%);
border-bottom: 1px solid #4c8cc8;
}
.button:visited {
color: green
}
.button:focus {
color: purple
}
.button:hover {
color: red
}
.button:active {
color: yellow
}
I use the button like this:
<div id="widecontent">
<div id="content">
<div id="content-inner">
<div class="column_left">
<h2>Download</h2>Click below to download the app:
<br/>
Download
</div>