Можно добиться другим способом аналогичного эффекта - использовать 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.