0

I have a button, and its background is white, with a 2px border. On :hover event, I created a transition to a colored background, but when the mouse is out, the background flashes to white immediately, instead of smoothly animates back to white.

What am I missing?

html input[type="button"],
.form-submit input[type="submit"] {
  margin: 10px 5px 10px 5px;
  -webkit-appearance: button;
  cursor: pointer;
  font-family: Aktiv-Grotesk, Verdana, Geneva, sans-serif;
  font-weight: normal;
  font-size: 13px;
  padding: 9px 15px;
  text-transform: uppercase;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  box-shadow: none;
  cursor: pointer;
  border: 2px solid #ff2e54;
  ;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  color: #ff2e54;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: #fff;
  -webkit-transition: all 0.3s cubic-bezier(0, 0, 0, 0);
  -moz-transition: all 0.3s cubic-bezier(0, 0, 0, 0);
  -o-transition: all 0.3s cubic-bezier(0, 0, 0, 0);
  transition: all 0.3s cubic-bezier(0, 0, 0, 0);
}

html input[type="button"]:hover,
.form-submit input[type="submit"]:hover {
  background: rgba(255, 45, 84, 1);
  background: -moz-linear-gradient(left, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 45, 84, 1)), color-stop(100%, rgba(255, 12, 72, 1)));
  background: -webkit-linear-gradient(left, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%);
  background: -o-linear-gradient(left, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%);
  background: -ms-linear-gradient(left, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%);
  background: linear-gradient(to right, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff2d54', endColorstr='#ff0c48', GradientType=1);
  border: 2px solid rgba(255, 255, 255, 0);
  color: #fff;
  -webkit-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  -moz-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  -o-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
}

html input[type="button"]:active,
.form-submit input[type="submit"]:active {
  border: 2px solid #ff607f;
  background: #ff607f!important;
  color: #eee;
  -webkit-box-shadow: 0px 1px 1px 0px #c12140;
  -moz-box-shadow: 0px 1px 1px 0px #c12140;
  -o-box-shadow: 0px 1px 1px 0px #c12140;
  box-shadow: 0px 1px 1px 0px #c12140;
}

html input[type="button"]:disabled,
.form-submit input[type="submit"]:disabled {
  -webkit-transition: all .2s ease-in-out 2s;
  -moz-transition: all .2s ease-in-out 2s;
  -o-transition: all .2s ease-in-out 2s;
  transition: all .2s ease-in-out 2s;
  cursor: default;
  background-color: #fff;
  border: 2px solid #E1E1E1;
  color: #BBB;
  box-shadow: none;
}
<input value="Download" type="button" onclick="this.disabled=true; this.value='Starting..';location.href='#'">
Henrique Barcelos
  • 451
  • 1
  • 4
  • 15

2 Answers2

1

As far as a I know background gradients don't support transitions, so you have to get rid of the gradient (which is hard to see anyway) then it works:

html input[type="button"],
.form-submit input[type="submit"] {
  margin: 10px 5px 10px 5px;
  -webkit-appearance: button;
  cursor: pointer;
  font-family: Aktiv-Grotesk, Verdana, Geneva, sans-serif;
  font-weight: normal;
  font-size: 13px;
  padding: 9px 15px;
  text-transform: uppercase;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  box-shadow: none;
  cursor: pointer;
  border: 2px solid #ff2e54;
  ;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  color: #ff2e54;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 1);
 
  -webkit-transition: all 0.3s cubic-bezier(0, 0, 0, 0);
  transition: all 0.3s cubic-bezier(0, 0, 0, 0);
}

html input[type="button"]:hover,
.form-submit input[type="submit"]:hover {
  background: rgba(255, 45, 84, 1);


  border: 2px solid rgba(255, 255, 255, 0);
  color: #fff;
  -webkit-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
}

html input[type="button"]:active,
.form-submit input[type="submit"]:active {
  border: 2px solid #ff607f;
  background: #ff607f!important;
  color: #eee;
  -webkit-box-shadow: 0px 1px 1px 0px #c12140;
  -moz-box-shadow: 0px 1px 1px 0px #c12140;
  -o-box-shadow: 0px 1px 1px 0px #c12140;
  box-shadow: 0px 1px 1px 0px #c12140;
}

html input[type="button"]:disabled,
.form-submit input[type="submit"]:disabled {
  -webkit-transition: all .2s ease-in-out 2s;
  -moz-transition: all .2s ease-in-out 2s;
  -o-transition: all .2s ease-in-out 2s;
  transition: all .2s ease-in-out 2s;
  cursor: default;
  background-color: #fff;
  border: 2px solid #E1E1E1;
  color: #BBB;
  box-shadow: none;
}
<input value="Download" type="button" onclick="this.disabled=true; this.value='Starting..';location.href='#'">

If you still want the gradient you should look into transition of gradient-position property - check this answer.

Picard
  • 3,745
  • 3
  • 41
  • 50
1

I stripped your CSS down a bit.. and then it works.

I don't think the browser likes all the gradient properties, the affect it pretty muted, is it necessary?

input[type="button"] {
  margin: 10px 5px 10px 5px;
  -webkit-appearance: button;
  cursor: pointer;
  font-family: Aktiv-Grotesk, Verdana, Geneva, sans-serif;
  font-weight: normal;
  font-size: 13px;
  padding: 9px 15px;
  text-transform: uppercase;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  box-shadow: none;
  cursor: pointer;
  border: 2px solid #ff2e54;
  ;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  color: #ff2e54;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: #fff;
  transition: 0.3s;
}

input[type="button"]:hover {
  background: rgba(255, 45, 84, 1);
  border: 2px solid rgba(255, 255, 255, 0);
  color: #fff;
  -webkit-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  -moz-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  -o-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
}

html input[type="button"]:active {
  border: 2px solid #ff607f;
  background: #ff607f!important;
  color: #eee;
  -webkit-box-shadow: 0px 1px 1px 0px #c12140;
  -moz-box-shadow: 0px 1px 1px 0px #c12140;
  -o-box-shadow: 0px 1px 1px 0px #c12140;
  box-shadow: 0px 1px 1px 0px #c12140;
}

html input[type="button"]:disabled,
.form-submit input[type="submit"]:disabled {
  -webkit-transition: all .2s ease-in-out 2s;
  -moz-transition: all .2s ease-in-out 2s;
  -o-transition: all .2s ease-in-out 2s;
  transition: all .2s ease-in-out 2s;
  cursor: default;
  background-color: #fff;
  border: 2px solid #E1E1E1;
  color: #BBB;
  box-shadow: none;
}

You can see it working in this fiddle: https://jsfiddle.net/nvqukp3L/1/

Robin Wright
  • 303
  • 1
  • 12