我如何做一个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

#bluebutton1 a{display:block;} 

Answer 2

这些规则补充一点：

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伪元素输入的任何规则将在悬停时应用于按钮，并将覆盖上一个声明中的原始规则。

UPDATE：

变化在你的页面的代码从这个：

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

为了使您点击与环绕它的整个元素标签。而且，由于标准DIV元素不应该在A标签内，因此您必须将div更改为span。