Question

正如您在JSFiddle中看到的那样，当您尝试单击按钮而不是“更多”时，链接不起作用。

SCSS

button {
padding: 8px 20px;
border: 0;
@include border-radius(6px);
font-size: 0.8em;
text-transform: uppercase;
float: right;
cursor: pointer;
display: block;


a {
    display: block;
    color: white;
    text-decoration: none;
}
}

.green {
background: #9fd468;
display: block;

&:hover {
    background: #ace175;
}

&:active {
    @include box-shadow (inset 2px 2px 1px #759f49);
}
}

html

<button class="green">
    <a href="<?php the_permalink(); ?>">More</a>
</button>

Answer 1

包裹锚标记中的按钮，使按钮成为链接。

<a href="<?php the_permalink(); ?>">
    <button class="green">More</button>
</a>

Answer 2

<a>标记仅位于按钮中的文本周围，因此为了使整个按钮可单击，您需要在按钮周围包裹<a>标记。这是代码：

<a href="<?php the_permalink(); ?>">
    <button class="green">More</button>
</a>

整个按钮不可点击

2 个答案: