CODEWITHSUNDEEP
csscss-transitionscss-animations
Eric Pigeon
Eric Pigeon

Reputation: 1131

css3 button background color infinite transition

Is there a way to make a button's background color fade from grey to blue then back to gray using only css3? A good example is a default action button is cocoa? I know this can be done in javascript but I'd rather only use css for this.

Upvotes: 19

Views: 43929

Answers (2)

Shailender Arora
Shailender Arora

Reputation: 7778

Hi i have made the button through CSS3 Animation please have look i hope its near to your question:-

HTML

<input type="submit" value="submit" class="button" />

CSS

.button {
    width:100px;
    height:20px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s infinite; /* Firefox */
    -webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}

@-moz-keyframes myfirst /* Firefox */ {
    0% {background:red;}
    50% {background:yellow;}
    100% {background:red;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */ {
    0% {background:red;}
    50% {background:yellow;}
    100% {background:red;}
}

see the demo:- http://jsbin.com/osohak/7/edit

read more about CSS3 Transitions & Animation http://css3.bradshawenterprises.com/cfimg/

Upvotes: 42

Tooraj Jam
Tooraj Jam

Reputation: 1612

If you need fade animation on hover or such things, CSS3 transition property is your solution.

EDIT:

.btn {
  background-color: lightblue;
  -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* FF4+ */
      -ms-transition: all 0.3s ease-out;  /* IE10 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
          transition: all 0.3s ease-out;
}  

.btn:hover {
  background-color: lightgreen;  
}

Upvotes: 5

Related Questions