Button link and hover

[scottjsn]

ISSUE:

The .btn{} section works only if it co-exists with a:link,a:visited and a:hover,a:active. If I do so, all the <a> links across the application will be affected.

What I truly want is that the only "This Button" to be affected, not other <a> links.

How can I do it?


Please see below:

<!-- style section
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}

.btn {
background: #ccc;
text-decoration: none;
border: 1px solid #aaa;
border-radius: 5px;
display: inline-block;
padding: 3px 6px
}
-->
...
...

<a href="whatever.html" class="btn">This Button</a>

[bionoid]

Why not just apply the styles to the .btn class instead of all the <a> tags:

.btn:link, .btn:visited {
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}
.btn:hover, .btn:active {
	background-color:#7A991A;
}
.btn {
	background: #ccc;
	text-decoration: none;
	border: 1px solid #aaa;
	border-radius: 5px;
	display: inline-block;
	padding: 3px 6px
}

<a href="#">Test</a>
<a href="whatever.html" class="btn">This Button</a>
<a href="#">Test</a>

[scottjsn]

Is there a feature to grade the answer on this forum?

[wearefour]

Woo! You also answered the question I was about to post, bionoid. Thank yoou!!!