在悬停时从中心填充元素

Question

如何创建一个按钮，以便悬停背景颜色时，元素从中心填充到元素的左右两侧。

示例：

我知道如何使用CSS3 transitions并可以让它动画到所需的形状，但不能让它从中心向外过渡。

形状不会改变尺寸我只想用transition填充它。

Answer 1

获得类似效果的另一种方法是使用linear-gradient作为background-image，将图片置于元素的中心，然后从background-size转换0% 100%悬停时100% 100%。将X轴上的background-size从0%增加到100%意味着背景颜色将慢慢填满元素并保持其位置固定在中心意味着颜色将从中心增长同时到左边和右边。

渐变的支持度低于变换，与 web-tiki 提供的答案相比，这是一个缺点，但这种方法不需要任何额外的伪元素，这意味着它们可以是用于其他目的。

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>

根据渐变图像的位置，可以使用相同的方法生成各种不同的填充方法。

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>

Answer 2

要在悬停时从中心用填充元素，可以使用伪元素和CSS3过渡。
在下面的示例中，背景是使用伪元素制作的，并在悬停时从0到1按比例缩放：

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

<div>NEXT</div>

Answer 3

你可以用这种结构做一个按钮

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



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

*编辑 - 似乎您希望文本在转换过程中颜色发生变化..

你可以在div中做一个2图像按钮 在悬停时隐藏whtie背景图像并显示包含棕色图像的div

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

将容器的宽度设置为0像素并将其固定到中心 然后设置宽度的动画将为您提供所需的结果。