如何使CSS按钮可点击

Question

我使用CSS制作了自己的按钮：

#bluebutton1 {
    position: absolute;
    top: 327px;
    left: 650px;
    height: 70px;
    width: 120px;
    border:2px solid #6495ED;
    background-color: #BCD2EE;
    border-radius: 40px;
    padding-top: 7px;
}

里面有一些文字。

现在，只有文本是可单击的。

我想让我的整个按钮都可单击，即当用户将鼠标悬停在按钮的任何部分上时，而不仅仅是文本上。有人知道该怎么做吗？我猜想我必须使用＃bluebutton1：hover，但不确定在其中放置什么代码。

Answer 1

在这些规则上添加以下内容：

display:block;

将按钮设置为SPAN（要正确使用W3C），并用如下标记将其包围：

<a href="http://your-website-here.com"><span id="bluebutton1">Text in the button</span></a>

然后整个按钮将是可单击的-不仅仅是内部的文本。

另外，由于这是一个按钮，并且按钮很多（可能是）。使您的CSS规则成为类是一个好主意：

  .bluebutton1 {
    position: absolute;
    top: 327px;
    left: 650px;
    height: 70px;
    width: 120px;
    border:2px solid #6495ED;
    background-color: #BCD2EE;
    border-radius: 40px;
    padding-top: 7px;
    display:block;
  }

并像这样使用它：

<a href="http://your-website-here.com"><span class="bluebutton1">Text in the button</span></a>

这样，您可以在页面上创建更多此类按钮。

：hover伪元素用于更改用鼠标悬停按钮时的外观。您可以使用：

.bluebutton:hover {
  background-color:red;
}

当用鼠标悬停按钮时，会将按钮的背景颜色更改为红色。使用：hover伪元素输入的任何规则都将在鼠标悬停时应用于按钮，并将覆盖先前声明中的原始规则。

更新：

从此更改页面中的代码：

<div id="bluebutton1">
        <p><a href="jerry.pancakeapps.com/Resume.pdf">Check out my <span style="color:red; font-family:Verdana; font-size:14px" id="link1"><strong>Resume</strong></span>!</a></p><br>
        </div>

对此：

<a href="jerry.pancakeapps.com/Resume.pdf" style="display: block;">
    <span id="bluebutton1">
        <p>
            Check out my
                <span style="color:red; font-family:Verdana; font-size:14px" id="link1">
                    <strong>Resume</strong>
                </span>!
        </p>
        <br>
    </span>
</a>

为了使整个元素都可单击，请在其周围加上A标签。并且由于标准技术，DIV元素永远都不应位于A标签内，因此您必须将div更改为span。