I have a group of CSS "buttons", and they all have the same rollover effect. A basic text color change. The only thing I want to do is change the starting
text color (the color of the text in the "link" or normal stage) of one of the buttons, but it would still have the same rollover effect as the rest of the buttons.
Is there a way to do this without defining an entirely new class wich would only have one field changed? This way I wouldn't need all the redundent code.
Thank you, and Here is the code:
a.button:link, a.button:visited, a.button:active
{
display:block;
width:100px;
height:30px;
float:left;
color: #063AA0;
background: #CCCCCC center center;
text-decoration: none;
text-align:center;
padding: 0.2em;
border: 4px solid;
border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.4em;
overflow: hidden;
}
a.button:hover {
color: #fff;
border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
}You could just put the value in-line:
<a class=button style="color: #336699" href=http://www.webdeveloper.com/forum/archive/index.php/"some/link.html">That didn't work, when I tried it, it removed all the style formatting for the button, and I was left with only a text link that was the color I specified inline. Thanks though.
Any other suggestions?
THANKS!I tried Nog's solution (WinXP: IE6, Firefox, Netscape7). The link maintained its button-look while the initial color was changed to #336699. The color no longer changed to #ffffff on hover, though.
Here's another way: (testedWinXP IE6, Firefox, Netscape7)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Links</title>
<style type="text/css">
a.button:link, a.button:visited, a.button:active {
display:block;
width:100px;
height:30px;
float:left;
background: #CCCCCC center center;
text-decoration: none;
text-align:center;
padding: 0.2em;
border: 4px solid;
border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.4em;
overflow: hidden;
}
.b1 {
color: #063AA0;
}
.b2 {
color:#000000;
}
a.button:hover {
color: #fff;
border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
}
</style>
</head>
<body>
<div>
<a class="b1 button" href=http://www.webdeveloper.com/forum/archive/index.php/"#">test</a>
<a class="b2 button" href=http://www.webdeveloper.com/forum/archive/index.php/"#">test</a>
</div>
</body>
</html>This is going to seem a little much, but you could do this:
<a style="display:block; width:100px; height:30px; float:left; color: #336699; background: #CCCCCC center center; text-decoration: none; text-align:center; padding: 0.2em; border: 4px solid; border-color: #dfdfdf #6e6e6e #6b6b6b #dadada; font-weight: bolder; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.4em; overflow: hidden;" href=http://www.webdeveloper.com/forum/archive/index.php/"some/link.html">link text</a>
Edit: Never mind, the post above mine works.Hmm, I tried both of those solutions, and had no luck. The buttons retained there "button" look, however with the code I will post below, the button text are now all white, or the same color as the hover state, which is also the same color that I have set with a:link attribute. Therefore there is no longer a roll over effect.
a.button:link, a.button:visited, a.button:active
{
display:block;
width:100px;
height:30px;
float:left;
/* color: #063AA0; */
background: #CCCCCC center center;
text-decoration: none;
text-align:center;
padding: 0.2em;
border: 4px solid;
border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.4em;
overflow: hidden;
}
.b1 {
color: ##063AA0;
}
.b2 {
color: #FF0000;
}
a.button:hover {
color: #fff;
border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
}
Plus here is the code for the actual buttons:
<td width="16%"><div><a href=http://www.webdeveloper.com/forum/archive/index.php/"specials.html" title="" class="b2 button">BLOWOUT</a></div></td>
<td width="16%"><div><a href=http://www.webdeveloper.com/forum/archive/index.php/"golf_club.html" title="" class="b1 button">WOODS</a></div></td>.b1 {
color: ##063AA0;
}Is that actually in your code? There are two #.What about
.b2:link{
color:F00;
}
and put the classes in the other order so
<td width="16%"><div><a href=http://www.webdeveloper.com/forum/archive/index.php/"specials.html" title="" class="button b2">BLOWOUT</a></div></td>
text color (the color of the text in the "link" or normal stage) of one of the buttons, but it would still have the same rollover effect as the rest of the buttons.
Is there a way to do this without defining an entirely new class wich would only have one field changed? This way I wouldn't need all the redundent code.
Thank you, and Here is the code:
a.button:link, a.button:visited, a.button:active
{
display:block;
width:100px;
height:30px;
float:left;
color: #063AA0;
background: #CCCCCC center center;
text-decoration: none;
text-align:center;
padding: 0.2em;
border: 4px solid;
border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.4em;
overflow: hidden;
}
a.button:hover {
color: #fff;
border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
}You could just put the value in-line:
<a class=button style="color: #336699" href=http://www.webdeveloper.com/forum/archive/index.php/"some/link.html">That didn't work, when I tried it, it removed all the style formatting for the button, and I was left with only a text link that was the color I specified inline. Thanks though.
Any other suggestions?
THANKS!I tried Nog's solution (WinXP: IE6, Firefox, Netscape7). The link maintained its button-look while the initial color was changed to #336699. The color no longer changed to #ffffff on hover, though.
Here's another way: (testedWinXP IE6, Firefox, Netscape7)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Links</title>
<style type="text/css">
a.button:link, a.button:visited, a.button:active {
display:block;
width:100px;
height:30px;
float:left;
background: #CCCCCC center center;
text-decoration: none;
text-align:center;
padding: 0.2em;
border: 4px solid;
border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.4em;
overflow: hidden;
}
.b1 {
color: #063AA0;
}
.b2 {
color:#000000;
}
a.button:hover {
color: #fff;
border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
}
</style>
</head>
<body>
<div>
<a class="b1 button" href=http://www.webdeveloper.com/forum/archive/index.php/"#">test</a>
<a class="b2 button" href=http://www.webdeveloper.com/forum/archive/index.php/"#">test</a>
</div>
</body>
</html>This is going to seem a little much, but you could do this:
<a style="display:block; width:100px; height:30px; float:left; color: #336699; background: #CCCCCC center center; text-decoration: none; text-align:center; padding: 0.2em; border: 4px solid; border-color: #dfdfdf #6e6e6e #6b6b6b #dadada; font-weight: bolder; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.4em; overflow: hidden;" href=http://www.webdeveloper.com/forum/archive/index.php/"some/link.html">link text</a>
Edit: Never mind, the post above mine works.Hmm, I tried both of those solutions, and had no luck. The buttons retained there "button" look, however with the code I will post below, the button text are now all white, or the same color as the hover state, which is also the same color that I have set with a:link attribute. Therefore there is no longer a roll over effect.
a.button:link, a.button:visited, a.button:active
{
display:block;
width:100px;
height:30px;
float:left;
/* color: #063AA0; */
background: #CCCCCC center center;
text-decoration: none;
text-align:center;
padding: 0.2em;
border: 4px solid;
border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.4em;
overflow: hidden;
}
.b1 {
color: ##063AA0;
}
.b2 {
color: #FF0000;
}
a.button:hover {
color: #fff;
border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
}
Plus here is the code for the actual buttons:
<td width="16%"><div><a href=http://www.webdeveloper.com/forum/archive/index.php/"specials.html" title="" class="b2 button">BLOWOUT</a></div></td>
<td width="16%"><div><a href=http://www.webdeveloper.com/forum/archive/index.php/"golf_club.html" title="" class="b1 button">WOODS</a></div></td>.b1 {
color: ##063AA0;
}Is that actually in your code? There are two #.What about
.b2:link{
color:F00;
}
and put the classes in the other order so
<td width="16%"><div><a href=http://www.webdeveloper.com/forum/archive/index.php/"specials.html" title="" class="button b2">BLOWOUT</a></div></td>