1

I have a submit button in a form and I'm trying to make a simple on-hover transition. I want it to Swap the colors of the button's text and the button's background color. The way I have it right now, the text successfully transitions over time, but the background color is still switching colors instantly. How do I fix this to make the background color also change over time? I am using Google Chrome, so I only put in the -webkit-transition. Once I get this working I'll add the others for other browsers.

Here's my simplified code:

<form method="post" action="processRegistration.php">

    <input class="submitbutton" type="submit" name="submit" value="Create Account" />

<form>

CSS:

#signupform
form
.submitbutton {
    margin: 0 auto;
    border-radius: 5px;
    border: solid 2px #66cc66;
    background-color: #66cc66;
    color: white;
    -webkit-transition: background-color 1s;
    -webkit-transition: color 0.5s; }
#signupform
form
.submitbutton:hover {
      background-color: white;
      color: #66cc66;
      -webkit-transition: background-color 1s;
      -webkit-transition: color 0.5s; }

http://jsfiddle.net/ewkruuk3/

cimmanon
  • 67,211
  • 17
  • 165
  • 171
xcdemon05
  • 678
  • 3
  • 7
  • 20

1 Answers1

4

This is because you are declaring the transition twice. You are basically overriding the first transition with the second one. In CSS if there are two of the same rules, the last one applies. You have to seperate both by a comma in one declaration.

transtion: color .5s, background-color 1s;

Ideally though your css can be simplified to the following:

.submitbutton {
    // Other rules

    background-color: #66cc66;
    color: white;

    -webkit-transition: background-color 1s, color 0.5s;
    transition: background-color 1s, color 0.5s; // Include this for browser compatability

    &:hover {
        background-color: white;
        color: #66cc66;
    }
}

You don't need a transition on :hover as the transition in the parent rule will also apply.

stevenw00
  • 1,155
  • 1
  • 13
  • 22