在悬停时从中心填充元素 [英] 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.

示例：

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

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.

推荐答案

要在悬停时从中心以实心颜色填充元素，您可以使用伪元素和CSS3过渡。 br>
在下面的示例中，背景是使用伪元素创建的，并且悬停时从0到1 horizo​​ntaly：

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;
  -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>

这篇关于在悬停时从中心填充元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！