Анимация заливки блока снизу вверх?

Question

[Ваня]

Есть обычный ul li a, каждый a идет как block, при наведении hover меняется background. Но! Как сделать анимацию заливки снизу вверх? Нашел, пример (это просто пример как надо, возможно есть более простой способ)www.rudebox.org.ua/creative-button-styles-css3 (исходники, первый ряд, 2 кнопка - посередине), но не пойму что там отвечает за анимацию, возможно по стандарту заливает сверху вниз.

codepen.io/anon/pen/XKWzEJ

Answer 1

[Danila]

там все элементарно, создается псевдоэлемент изначально скрытый (нулевая высота)

.btn:after {
    content: '';
    position: absolute;
    z-index: -1;
    transition: all 0.3s;
}
.btn-1b:after {
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: #fff;
}

при наведении высота псевдоэлемента увеличивается на всю кнопку

.btn-1b:hover:after, .btn-1b:active:after {
    height: 100%;
}

все это вы можете посмотреть и сами

Comments

[Ваня]

я смотрел, и ничего не понял, сейчас стало ясно, значит нужно изменить top на bottom

[Danila]

Сергей: верно

Answer 2

[Дмитрий]

https://jsfiddle.net/soledar10/f9v920mw/

Comments

[Ваня]

только в вашем примере если добавить в блок текст, он будет скрываться при наведении

Answer 3

[display: block]

box-shadow внутри на всю высоту элемента на ховер

Comments

[Ваня]

не понял