Reputation: 3846
I have a button class working like this :
<p class="button"><a href="#">Rejoindre</a></p>
The CSS is :
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
}
.button a:hover
{
text-decoration: none;
}
How can I make the entire button (represented by the paragraph tag) a link instead of just the text ?
Upvotes: 0
Views: 476
Reputation: 2047
<p>
are block elements, meaning that they naturally are at 100%
width. If you just added display: block;
to the anchor tag, you can make it behave the same way. Here's a fiddle
. That way allows you to get rid of the p
tag all together.
Upvotes: 1
Reputation: 4170
You can add display:block;
to you anchor tag.
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).
Fiddle: http://jsfiddle.net/akx3p/
CSS:
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
display: block;
}
.button a:hover
{
text-decoration: none;}
Upvotes: 1
Reputation: 191829
Add display: block
to the .button a
ruleset.
http://jsfiddle.net/ExplosionPIlls/UvrKx/
Upvotes: 1
Reputation: 10865
You can put the link tag on the outside to make anything inside it be contained in the link:
<a href="#"><p class="button">Rejoindre</p></a>
However, you probably want to use something other than a p
tag for your button, maybe a button
element instead?
Upvotes: 5