2

我希望整个 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 区域。

4

1 回答 1

4 

#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-28T23:34:55.857 回答