HTML / CSS按钮链接不起作用

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.

Answer 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

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

Answer 2

<a href="pictures.htm" class="button">Pictures of our destinations</a>而不是第一段

Answer 3

您可以直接添加class="button" <a>标签的样式并删除<p>标签。

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

Answer 4

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;
}