chelovekmuravei
@chelovekmuravei
\(-_-)/ раз два три четыре

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

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

codepen.io/anon/pen/XKWzEJ
  • Вопрос задан
  • 6082 просмотра
Решения вопроса 2
Machinez
@Machinez
там все элементарно, создается псевдоэлемент изначально скрытый (нулевая высота)
.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%;
}

все это вы можете посмотреть и сами
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
qork
@qork
{ background: #F00B42 }
box-shadow внутри на всю высоту элемента на ховер
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы