Sliding link background

baillieogrady(55)

Published in

#steempress

Words

150

Reading

1 min

Listen

Play

As we can animate width smoothly in CSS, creating a sliding background animation on a link is a breeze, please see below:

Example

Button

HTML

<a href="#" class="button-slide">Button</a>

CSS

.button-slide {
  display: inline-block;
  text-decoration: none;
  padding: 1em 1.5em;
  background: none;
  color: #000;
  font-weight: bold;
  position: relative;
  transition: color 0.25s ease;
  border: 3px solid #000;
}
.button-slide:hover {

color: #fff;

}
.button-slide::after {

position: absolute;

content: "";

top: 0;

left: 0;

width: 0;

height: 100%;

background-color: #000;

transition: width 0.2s ease;

z-index: -1;

}
.button-slide:hover::after {

width: 100%;

}