CODEWITHSUNDEEP
cssbuttoncss-transitionscss-shapes
con322
con322

Reputation: 1129

Fill element from center on hover

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 :

Button filled by background color on hover

I know how to use CSS3 transitions and can get it to animate to the desired shape but can't get it to transition from center outwards.

The shape does not change size I just want to fill it using a transition.

Upvotes: 18

Views: 27375

Answers (3)

web-tiki
web-tiki

Reputation: 103790

To fill an element with a solid color from center on hover, you can use a pseudo element and CSS3 transitions.
In the following example, the background is made with a pseudo element and scaled from 0 to 1 horizontaly on hover:

div {
  position: relative;
  display: inline-block;
  padding: 15px 70px;
  border: 5px solid #B17461;
  color: #B17461;
  font-size: 30px;
  font-family: arial;
  transition: color .5s;
}
div:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #B17461;
  z-index: -1;
  transform:scaleX(0);
  transition: transform .5s;
}
div:hover {
  color: #fff;
}
div:hover:before {
  transform: scaleX(1);
}
<div>NEXT</div>

Upvotes: 15

Harry
Harry

Reputation: 89760

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;
}
<div>NEXT</div>

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;
}
<h4>From center towards left and right</h4>
<div class='center-right-left'>NEXT</div>
<h4>From center towards top and bottom</h4>
<div class='center-top-bottom'>NEXT</div>
<h4>From center towards corners</h4>
<div class='center-corner'>NEXT</div>
<h4>From right to left</h4>
<div class='to-left'>NEXT</div>
<h4>From left to right</h4>
<div class='to-right'>NEXT</div>
<h4>From bottom to top</h4>
<div class='to-top'>NEXT</div>
<h4>From top to bottom</h4>
<div class='to-bottom'>NEXT</div>

Upvotes: 47

vico
vico

Reputation: 2142

you can do a button with this structure 

<button> 
<text layer>
<image layer>
</button>



on.hover -> button > image
transform-origin: center
insert desired effect here

*edit -- seems like you want the text the have color changes while transition is happening..

you can do a 2 image button inside a div on hover hide the whtie background image and display the div that contains the brown image

<div container>
<img borwn butn>
</div>

Set the width of container to 0 pix and fix it to the center and then animate just the width will give you the desired results.

Upvotes: -2

Related Questions