CODEWITHSUNDEEP
csscolorscss-transitionstransition
Owen Edwards
Owen Edwards

Reputation: 45

CSS3 Colour Transition on Button

I can't seem to get my button to change colour with CSS3 transitions. I've been successful using the roundabout same code on and tags, but no such luck with the button.

Here's the code:

.button {
    position:absolute;
    width: 135px;
    height: 46px;
    background-color: #ef6529;
    text-decoration: none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    border: 1px solid #c33b00;
    box-shadow: 0px 4px 0px #af5a5a;
    -moz-box-shadow: 0px 4px 0px #af5a5a;
    -webkit-box-shadow: 0px 4px 0px #af5a5a;
    -webkit-transition:color 1s ease-in;  
    -moz-transition:color 1s ease-in;  
    -o-transition:color 1s ease-in;  
    transition:color 1s ease-in;
}

.button:hover {
    width: 135px;
    height: 46px;
    background-color: #ff6726;
    border-radius: 4px;
    -moz-border-radius: 4px;
    border: 1px solid #c33b00;
    text-decoration: none;
}

and the HTML:

<a href="#" class="button">
    <!--<h2>PUSH ME!</h2>-->
</a>

Cheers!

Upvotes: 2

Views: 9663

Answers (1)

James Coyle
James Coyle

Reputation: 10398

You haven't specified colors for the button. I presume you want to transition the background color insted. Just change transition:color 1s ease-in; to transition: background-color 1s ease-in;.

Upvotes: 1

Related Questions