/    Sign up×
Community /Pin to ProfileBookmark

Rollover Effect with CSS

Copy linkTweet thisAlerts:
Jul 01.2005

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;

}

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@NogDogJul 01.2005 — You could just put the value in-line:
[code=html]
<a class=button style="color: #336699" href="some/link.html">
[/code]
Copy linkTweet thisAlerts:
@jpmattisauthorJul 01.2005 — 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!
Copy linkTweet thisAlerts:
@HaganeNoKokoroJul 01.2005 — 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)&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;Links&lt;/title&gt;
&lt;style type="text/css"&gt;
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;
}

<i> </i> a.button:hover {
<i> </i> color: #fff;
<i> </i> border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;

<i> </i> }
<i> </i>&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;a class="b1 button" href="#"&gt;test&lt;/a&gt;
&lt;a class="b2 button" href="#"&gt;test&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@SanimJul 01.2005 — This is going to seem a little much, but you could do this:
<i>
</i>&lt;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="some/link.html"&gt;link text&lt;/a&gt;


Edit: Never mind, the post above mine works.
Copy linkTweet thisAlerts:
@jpmattisauthorJul 01.2005 — 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="specials.html" title="" class="b2 button">BLOWOUT</a></div></td>

<td width="16%"><div><a href="golf_club.html" title="" class="b1 button">WOODS</a></div></td>
Copy linkTweet thisAlerts:
@HaganeNoKokoroJul 02.2005 — .b1 {

color: [color=red]##[/color]063AA0;

}[/quote]Is that actually in your code? There are two [color=red]#[/color].
Copy linkTweet thisAlerts:
@IncaWarriorJul 02.2005 — What about

.b2:link{

color:F00;

}

and put the classes in the other order so

<td width="16%"><div><a href="specials.html" title="" class="button b2">BLOWOUT</a></div></td>
×

Success!

Help @jpmattis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...