如何为 link/div 背景添加 css 过渡颜色更改

Question

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

超文本标记语言

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

CSS

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

我不确定将-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>