링크/div 배경에 CSS 전환 색상 변경을 추가하는 방법

Question

#555555에서 #b13c19으로 전체 div를 변경하고 싶습니다. 그것은 링크를 감싸는 단순한 둥근 모서리 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; 등의 속성을 넣어 어디 모르겠어요. 링크 위로 마우스를 가져 가면 배경색이 바뀌길 원합니다. 링크의 배경색으로 작동하게 만들었지 만 배경이 전체 230x25 영역을 포함하지 않기 때문에 모양이 좋지 않습니다.

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>