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;等属性放在何处。当我将鼠标悬停在链接上时，我希望背景改变颜色。我使它适用于链接的背景颜色，但它看起来不太好，因为背景只包含措辞，而不是整个230 x 25区域。

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: