Lego2012
12/13/2016 - 4:20 PM

Raising up effect for buttons on hover

Raising up effect for buttons on hover

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
  padding: 10px 24px;
  border-radius: 3px;
  color: #fff;
  background-color: #03a9f4;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  text-transform: uppercase;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-property: box-shadow, -webkit-transform, background-color;
          transition-property: box-shadow, transform, background-color;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
}

button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"],
.button:hover {
  background-color: #039be5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
  -webkit-transform: translate3d(0px, -1px, 0px);
          transform: translate3d(0px, -1px, 0px);
}