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