Don't have shadows on div in link..

[pen]

So I have something like this for all links making them look like little buttons of sorts.

a:link {
	color:#FFFFFF;
	text-decoration: none;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	border-radius: 5px;
	
	padding:1px 5px;
	font-weight:bold;
	
	-moz-box-shadow: 2px 2px 3px #080808;
	-webkit-box-shadow: 2px 2px 3px #080808;
	box-shadow: 2px 2px 3px #080808;
}

I also have similar css for buttons that I define and use as a class for div or span tags. Those buttons of course have links so they are getting both the code above and the code for the button.

How do I get around that?

[auntnini]

Why don't you create a .CLASS for the special effects (or a couple of classes, one for each effect). Remember you can apply multiple space-separated classes to one element <div id="main" class="button shadow">...</div>.

Or better, "contextually" style links for specific sections

#nav a:link { 	-moz-border-radius: 5px; 	-webkit-border-radius: 5px;  border-radius: 5px;  
                	-moz-box-shadow: 2px 2px 3px #080808; 	-webkit-box-shadow: 2px 2px 3px #080808; box-shadow: 2px 2px 3px #080808;
}

Of course, I'm assuming that's what you want. There are also options such as "adjacent sibling" and "attributes" to create very specific style rules.

[pen]

Hmm, interesting, I will give this some thought and break it up differently.

[pen]

Here is my problem, this is an old site that is all HTML that has 200+ pages. Changing tags in the HTML isn't an option at this point.

Does any one see any way of doing this. As it is now any properties that I apply to a:link are showing up on any button that I have. I just want to be able to style text links and not links that are a button.

Button looks something like below and is styled to have a drop shadow and round corners.

<a Href=""><span class="button">Push Me</span></a>

[pen]

I find this odd behaviour so maybe some one can shed some light on it.

The drop shadows that are being applied in the a selector are adding a drop shadow that is the height of the text but wider then the button. So I get this second drop shadow sticking out the ends of the buttons.

[Major Payne]

CSS 3 does not work in all browsers. Be sure you are using a compatible browser for viewing the CSS 3 effects.