Sliding Button Background

The text background also slides in concert with the background. Only webkit+ browsers compatible.

by nilloc

HTML

<a href="#" class="button slider">Test Button</a>

CSS

body {
  background:hsla(0,0%,30%,1);
  font-size:32px;
}

.button {
  color:red;
  font-family:sans-serif;
  font-weight:bold;
  text-decoration: none;
  line-height:3em;
  padding: 1em 1.5em;
}

.button.slider {
  position:relative;
  background-image:linear-gradient(120deg, white 0px, white 50%, black calc(50% + 1px), black 100%);
  
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.button.slider::before{
  content:"\2022\00a0";
}

.button.slider::after{
  content:"";
  background-image:linear-gradient(120deg, red 0px, red 50%, white calc(50% + 1px), white 100%);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
}

.button.slider,
.button.slider::after{
  background-position:top 0 right 0;
  background-size:calc(200% + 2em) 100%;
  background-repeat:no-repeat;
  transition:background-position 400ms linear;
}

.button.slider:hover,
.button.slider:hover::after
{
  background-position:top 0 left 0;
}