EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

button {
  width: 180px;
  height: 40px;
  border: none;
  color: #fff;
  
  /* set up background gradient and animation */
  background-image: linear-gradient(to bottom, #5187c4, #1c2f45);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;
}
button:hover {
  /* shift background gradient position */
  background-position: 0 0;
  cursor: pointer;
}

/* =============================== */
/* ========= Just for demo ====== */
/* ============================= */

.container {
  position: relative;
  margin: 20px auto;
  width: 280px;
  height: 160px;
  background-color: #333;
}

.slider {
  position: absolute;
  top: calc(50% - 18px);
  right: 50px;
  margin-top: -36px;
  width: 160px;
  height: 72px;
  background-image: linear-gradient(#5187c4, #1c2f45);
  transition: margin-top .5s;
  z-index: 1;
}
.frame:hover + .slider {
  margin-top: 0px;
  cursor: pointer;
}

.frame:hover {
  cursor: pointer;
}

.frame {
  position: absolute;
  top: calc(50% - 18px);
  right: 50px;
  box-sizing: border-box;
  width: 160px;
  height: 36px;
  border: solid 1px #ccc;
  border-radius: 8px;
  z-index: 2;
}

.info {
  margin: 20px auto;
  font: 18px/150% sans-serif;
}

HTML

<button>Hover over me!</button>

<h2>Deutsch</h2>
<p class="info">Verläufe können nicht animiert werden. Sie werden über die Eigenschaft <code>background-image</code> erzeugt, die nicht animiert werden kann. Aber man kann die Position des Hintergrundbildes animieren. Also muss man nur die Dimensionen des Hintergrundbildes vergrößern und den Verlauf dann verschieben. Das kann bedeuten, dass man für manche Lösungen evtl. mit Farbstops arbeiten muss. Diese werden nicht vom alten IE unterstützt, weshalb es dann leider keine gleichwertige Fallbacklösung für diesen gibt.</p>
<h2>English</h2>
<p class="info">
  You can't animate gradient colors with pure CSS. Gradients are set via background-image, which is not (currently) an animatable property. But background-position is. So you can use background-size to make the background taller than the element it's on, then animate background-position to slide it up or down. The result is a simple animated fading gradient.
</p>
<div>Blog post: <a href="http://codersblock.blogspot.com/2013/12/gradient-animation-trick.html">Gradient Animation Trick</a></div>

A PHP Error was encountered

A PHP Error was encountered

Recommendation

A PHP Error was encountered

A PHP Error was encountered

Recommendation

Join Effecthub.com