Fill element from center on hover

Question

How can I create a button so that on hover the background colour fills the element from center to left and right of the element.

Example :

Answer 1

Another way to achieve a similar effect would be to use linear-gradient as the background-image, position the image at the center of the element and then transition background-size from 0% 100% to 100% 100% on hover. Incrementing background-size in X axis from 0% to 100% would mean that the background color will slowly fill up the element and keeping its position fixed at the center would mean that the color would grow from center to the left and right edges at the same time.

Gradients have lower support than transforms and that is one drawback compared to the answer that has been provided by web-tiki's but this approach does not require any extra pseudo-elements which mean that they can be used for other purposes.

div {
  position: relative;
  display: inline-block;
  padding: 15px 70px;
  border: 5px solid #B17461;
  color: #B17461;
  font-size: 30px;
  font-family: arial;
  background-image: linear-gradient(#B17461, #B17461);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .5s, color .5s;
}
div:hover {
  background-size: 100% 100%;
  color: #fff;
}

NEXT

---

The very same approach can be used for producing a variety of different fill approaches depending on the position of the gradient image.

div {
  position: relative;
  display: inline-block;
  padding: 15px 70px;
  border: 5px solid #B17461;
  color: #B17461;
  font-size: 30px;
  font-family: arial;
  background-image: linear-gradient(#B17461, #B17461);
  background-repeat: no-repeat;
  transition: background-size .5s, color .5s;
}
.center-right-left, .center-top-bottom, .center-corner {
  background-position: 50% 50%;
}
.to-left {
  background-position: 100% 50%;
}
.to-right {
  background-position: 0% 50%;
}
.to-top {
  background-position: 50% 100%;
}
.to-bottom {
  background-position: 50% 0%;
}
.center-right-left, .to-left, .to-right {
  background-size: 0% 100%;
}
.center-top-bottom, .to-top, .to-bottom {
  background-size: 100% 0%;
}
.center-corner {
  background-size: 0% 0%;
}
div:hover {
  background-size: 100% 100%;
  color: #fff;
}

From center towards left and right
NEXT
From center towards top and bottom
NEXT
From center towards corners
NEXT
From right to left
NEXT
From left to right
NEXT
From bottom to top
NEXT
From top to bottom
NEXT