user1421300 user1421300 - 17 days ago 5
CSS Question

How to add a css transition color change for a link/div background

I want the whole div to change from

#555555
to
#b13c19
. It's a simple rounded corner div wrapped around a link. I cant seem to get it right. Here is what I have so far. Any help would be much appreciated.

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


I'm not sure where to put the
-moz-transition: background 1s ease-in;
etc. properties. I want the background to change color when I hover over the link. I made it work for the background color of the link but it doesn't look good because the background only encompasses the wording and not the whole 230 x 25 area.

Answer

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

Comments