如何为链接/ div背景添加CSS过渡颜色更改

Question

我希望整个div从#555555变为#b13c19 。 这是一个环绕链接的简单圆角div。 我似乎无法正确处理。 这是我到目前为止所拥有的。 任何帮助将非常感激。

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;放在哪里-moz-transition: background 1s ease-in; 等属性。 当我将鼠标悬停在链接上时，我希望背景改变颜色。 我使它适用于链接的背景颜色，但是它看起来并不好，因为背景仅包含文字，而不是整个230 x 25区域。

Answer 1

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