Заполнять кнопку из центра при наведении

Question

Как мне создать кнопку, чтобы при наведении курсора цвет фона заполнял её из центра налево и направо.
Пример:

Я знаю, как использовать transitions CSS3, и могу заставить его анимировать заполнение желаемой формы, но не могу заставить его заполнять из центра к краям.

Форма не меняет размер, я просто хочу заполнить ее с помощью transition.

_{Свободный перевод вопроса Fill element from center on hover от участника @on322.}

Answer 1

Можно добиться другим способом аналогичного эффекта - использовать linear-gradient в качестве background-image, расположить изображение в центре элемента и затем изменить background-size с 0% 100% на 100% 100% при наведении.
Увеличение размера фона по оси X от 0% до 100% будет означать, что цвет фона будет медленно заполнять элемент, а сохранение его положения фиксированным в центре будет означать, что цвет будет расти от центра к левому и правому краям в тоже самое время.
Градиенты имеют меньшую поддержку, чем transforms, и это один из недостатков по сравнению с ответом, который был предоставлен @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>Из центра одновременно влево и вправо</h4>
<div class='center-right-left'>NEXT</div>
<h4>От центра к верху и низу</h4>
<div class='center-top-bottom'>NEXT</div>
<h4>От центра к углам</h4>
<div class='center-corner'>NEXT</div>
<h4>Справа налево</h4>
<div class='to-left'>NEXT</div>
<h4>Слева направо</h4>
<div class='to-right'>NEXT</div>
<h4>Снизу вверх</h4>
<div class='to-top'>NEXT</div>
<h4>Сверху вниз</h4>
<div class='to-bottom'>NEXT</div>

_{Свободный перевод ответа от участника @Harry.}

Answer 2

Чтобы залить элемент сплошным цветом от центра при наведении курсора, вы можете использовать псевдоэлемент и transitions 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>

_{Свободный перевод ответа от участника @web-tiki.}

БЛОГ НА HUSL

Заполнять кнопку из центра при наведении

Ответы (2 шт):