Button with Moving Gradient

by Brad Chesney

HTML

<div class="fx-button">
<div class="button-content">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAhCAYAAAALboFLAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV+/UKTFwQ4iHTJUB7EgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APE1cVJ0UVK/F9SaBHjwXE/3t173L0D/M0qU83gOKBqlpFJJYVcflXoeUUQIUQQw6jETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOfGYQRckfuS67PIb55LDfp4ZNbKZeeIosVDqYrmLWdlQiaeI44qqUb4/57LCeYuzWq2z9j35C8MFbWWZ6zRjSGERSxAhQEYdFVRhIUGrRoqJDO0nPfxDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAqEX2/4YBnp2gVbDtr+Pbbt1AgSegSut4681gZlP0hsdLX4E9G8DF9cdTd4DLneAwSddMiRHCtD0F4vA+xl9Ux4YuAX61tze2vs4fQCy1FX6Bjg4BEZKlL3u8e7e7t7+PdPu7wdXSnKcEOSXsgAAAAZiS0dEAKMAmwCI3OECOgAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+cEBQ8XBXt+4EwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABn0lEQVQ4y02UQZJjIQxDn4Rz/7nCrOeEqQlWLww/vUlR+WDZTwL9+/snpAlBLAAs0QkSSKJs0b1YBCQiIUQZEgCoz/9NAh/CfIZtkTQILFPLphMiIALNRmKYFdU92sHPhiBkgRphyssALDFi0qkCWEimktCnQRlo5keCT4BN7b2JjBLSAhnRTz9I1FqLzowvmWQmCsMIgUnONMxpQZLZMH9SO5m1IOlv80cKRJGQDF0pY8eZjEu872hA0wP0yM9K1OtVdPdBsAhgBq41ttfuTXI49zTXBPnyC2V8FExuE4H0o0eNWZk83al4NKenz2c/p/FUUyYRQoQMzLsnV+qBO4rVCeked3tgXjsu+fJa57iQ/SQ9OpkCisMoYioC+1pzBql61bEl4DWkEyLBlXu/3xy3CB/SYOtJBECtVd/G7amkb/MEqrtJQnqPDDrs9QtB91euQ3efe3Dpi3oSmCm/amEy8nruXU8FgWRI0z4X9PZki9Z9KuYt8C+fsSgQT+btyXjOvUtIQslC+aYWglYNSHtg9t6TwA6Rz0vQ493J2g8fnASMeeRW2QAAAABJRU5ErkJggg==" />
<span class="button-text">DESKTOP BUTTON WITH COLOR SHIFT</span>
</div>
</div>
<p>
Drop shadow intrudes into immediate space around the element.
</p>
<p>
Not a particular issue, but something to be aware of.
</p>

CSS

.fx-button {
  background-image: linear-gradient(15deg, #a09486, #d2c7af);
  box-shadow: 5px 5px 13px -4px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 5px 5px 13px -4px rgba(0, 0, 0, 0.35);
  color: white;
  height: 33px;
  margin: 0;
  padding: 0;
  position: relative;
  vertical-align: middle;
  width: fit-content;
  z-index: 1;
}

.fx-button::before {
  background-image: linear-gradient(15deg, #d2c7af, #a09486);
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.2s linear;
  z-index: -1;
}
.fx-button:hover::before {
  opacity: 1;
}

.button-text {
  border: 0;
  font-family: sans-serif;
  font-size: 12px;
  height: auto;
  margin: 0;
  padding: 0 10px 0 2px;
  position: relative;
  top: -11px;
}
.button-content {
  border: 0;
  height: 33px;
  margin: 0;
  padding: 0;
  width: fit-content;
  vertical-align: middle;
}

p {
   border: 1px red solid;
   margin: 0;
   padding: 0;
}