0

I have a problem with my CSS3 button. I made so the text and the backround would transition at the same time and the same speed on hover. But when you first hover over it, it just changes the color at once while the text transitions. So now i have no idea what the problem is!

The CSS Code will be linked below or you can just view it at the bottom of this post..

JS Fiddle: TechnicalCoder/transition/background/

CSS:

input[type=submit] {
  color: white;
  background: #111;
  background-image: -webkit-linear-gradient(top, #111, #333);
  background-image: -moz-linear-gradient(top, #111, #333);
  background-image: -ms-linear-gradient(top, #111, #333);
  background-image: -o-linear-gradient(top, #111, #333);
  background-image: linear-gradient(to bottom, #111, #333);
  color: #ffffff;
  font-size: 20px;
  height:70px;
  width:1000px;
  text-decoration: none;
  font-family:SansaRegular;
  font-size:50px;
  -webkit-transition:all 5s ease-in-out;
  -moz-transition: all 5s ease-in-out;
  transition: all 5s ease-in-out;
}

input[type=submit]:hover{
  background: #333;
  background-image: -webkit-linear-gradient(top, #333, #111);
  background-image: -moz-linear-gradient(top, #333, #111);
  background-image: -ms-linear-gradient(top, #333, #111);
  background-image: -o-linear-gradient(top, #333, #111);
  background-image: linear-gradient(to bottom, #333, #111);
  text-decoration: none;
  color:#cccccc;
  -webkit-transition: all 5s ease-in-out;
  -moz-transition: all 5s ease-in-out;
  transition: all 5s ease-in-out;
}

Thanks for taking time helping me! TechnicCoder2000

2 Answers2

2

Browser have not all implemented gradient transitions. Similar question and workaround can be found here: Use CSS3 transitions with gradient backgrounds

Community
  • 1
  • 1
jswitchback
  • 141
  • 1
  • 2
  • This does sadly not answer my question :/ –  Jan 20 '16 at 19:42
  • I'm not sure how it doesn't answer the question.You can not animate a state change (transition) on a background gradient in any duration of time, unless you're targeting IE10+. For most users your background color will change instantaneously. Are you on Internet Explorer or Edge browser attempting this? – jswitchback Jan 21 '16 at 21:53
0

You try change the time in "transition":

input[type=submit] {
  -webkit-transition:all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

input[type=submit]:hover {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
step
  • 186
  • 7