HTML/CSS button link not working

Question

I'm trying to put a link to another page of my website inside this button I've made using CSS. However, the button already has formatted text in it and the link apparently only works when I use text inside the <a></a> tags. Any ideas how I can just make the entire button a clickable link? Here's the offending code:

<nav>
<p class="button"><a href="pictures.htm"></a>Pictures of our destinations</p>
<p class="button">Prices for flights, hotels and all in one deals</p>
<p class="button">Today's deals</p>
<p class="button">Contact us!</p> 
<p class="button">Sign up for an account</p>
</nav>

As that code stands, the link does not work and there is no clickable area. However, moving the text from the <p> tags to the <a> tags makes the link work, but my CSS formatting doesn't apply to it then.

You should get rid of the wrapping <p> tag and simply style the <a> tag directly. The wrapping tag seems unecessary. — plalx
– plalx, Commented Jan 9, 2014 at 17:22

n1kkou · Accepted Answer · 2014-01-09 17:24:51Z

3

<a href="pictures.htm" class="button">Pictures of our destinations</a> instead of the first paragraph

answered Jan 9, 2014 at 17:24

n1kkou

3,1402 gold badges25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pranav C Balan · Accepted Answer · 2014-01-09 17:26:49Z

1

You need to do like this

<a href="pictures.htm" class="button">Pictures of our destinations</a>

You need to put content inside a tag that is to be clickable

And now style the button

.button{    
/*.......

Your button style properties

.........*/        
}

edited Jan 9, 2014 at 17:26

answered Jan 9, 2014 at 17:21

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Comments

Merlin · Accepted Answer · 2014-01-09 17:23:15Z

0

You could style your <a> tag directly adding class="button" and remove the <p> tag.

<a class="button" href="pictures.htm">Pictures of our destinations</a>

answered Jan 9, 2014 at 17:23

Merlin

4,9252 gold badges35 silver badges53 bronze badges

Comments

Nisse Engström · Accepted Answer · 2018-01-24 10:12:08Z

0

Removing the <p> tag will solve your issue:

<a href="pictures.htm" class="button">Pictures of our destinations</a>

Use your own CSS class:

.button {
    border: none;
    background-color: #e7e7e7;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

edited Jan 24, 2018 at 10:12

Nisse Engström

4,76323 gold badges29 silver badges44 bronze badges

answered Jan 24, 2018 at 7:29

Kishor Velayutham

8286 silver badges18 bronze badges

Collectives™ on Stack Overflow

HTML/CSS button link not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related