如何爲鏈接/ div背景添加css過渡顏色更改

我希望整個div從#555555更改爲#b13c19。這是一個簡單的圓角轉角div包裹在一個鏈接。我似乎無法做到。這是我到目前爲止。任何幫助將非常感激。如何爲鏈接/ div背景添加css過渡顏色更改

HTML

<div id="resume_btn"> 
    <a href="Aalok_Resume.pdf"> Click Here to View My Resume </a> 
</div>

CSS

#resume_btn { 
    position: relative; 
    margin-top: 25px; 
    padding: 20px; 
    width: 220px; 
    height: 25px; 
    background-color: #555555; 
    background-repeat: no-repeat; 
    text-align:center; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -ms-border-radius: 10px; 
    -0-border-radius: 10px; 
    border-radius: 10px; 
} 

#resume_btn a { 
    text-decoration: none; 
    color:white; 
    font-family: 'oswald', helvetica, arial, sans-serif; 
    font-size: 18px; 
    font-weight: 300; 
}

我不知道放在哪裏-moz-transition: background 1s ease-in;等特性。當我將鼠標懸停在鏈接上時，我希望背景改變顏色。我使它適用於鏈接的背景顏色，但它看起來不太好，因爲背景只包含措辭而不是整個230 x 25區域。

來源

2012-05-28 aalok89

#resume_btn { 
 
    position: relative; 
 
    margin-top: 25px; 
 
    width: 320px; 
 
    background-color: #555555; 
 
    background-repeat: no-repeat; 
 
    text-align:center; 
 
    
 
    -webkit-border-radius: 10px; 
 
     -moz-border-radius: 10px; 
 
     -ms-border-radius: 10px; 
 
     -0-border-radius: 10px; 
 
      border-radius: 10px; 
 

 
    -webkit-transition: background 1s; 
 
     -moz-transition: background 1s; 
 
     -ms-transition: background 1s; 
 
     -o-transition: background 1s; 
 
      transition: background 1s; 
 
} 
 

 
#resume_btn:hover { 
 
    background: #b13c19; 
 
} 
 

 
#resume_btn a { 
 
    text-decoration: none; 
 
    display: block; 
 
    color: white; 
 
    font: 300 18px 'oswald', helvetica, arial, sans-serif; 
 
    padding: 20px; 
 
}

<div id="resume_btn"> 
 
    <a href="Aalok_Resume.pdf"> Click Here to View My Resume </a> 
 
</div>

來源

2012-05-28 23:34:55

你是什麼意思「沒有工作？」它完美的作品，只需看看JSFiddle –

謝謝！有效。我也嘗試過......不知道爲什麼它上次不工作。我知道它不會爲IE工作，但我可以不在乎。無論如何，我的目標受衆還不夠愚蠢，仍然無法使用IE。我知道這是不好的編碼道德規範，但這是我的個人網站。 – aalok89

它應該在IE中工作。此外，您不一定需要該包裝div才能以這種方式設計鏈接。 - http://jsfiddle.net/michaelburtonray/LTsag/60/ – Michael

如何爲鏈接/ div背景添加css過渡顏色更改

回答

相關問題