悬停时从中心填充元素

Question

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

例子：

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

形状不会改变大小我只想使用transition 填充它。

Answer 1

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

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



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

*edit -- 似乎您希望文本在转换发生时颜色发生变化..

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

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

将容器的宽度设置为 0 pix 并固定到中心 然后仅对宽度进行动画处理将为您提供所需的结果。

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

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

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

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>