На этом уроке разберем три разных эффекта при наведении на кнопку.
На этом уроке разберем три разных эффекта при наведении на кнопку.
Посмотрите демо на CodePen
HTML разметка
Создадим в разметке три разных блока и и обернем в контейнер с классом wrapper для выравнивания их по центру. Один блок - одна кнопка.
<div class="wrapper">
<div class="buttonLeft"><span>Left</span></div>
<div class="buttonOverlay"><span>Center</span></div>
<div class="pressDown"><span>Right</span></div>
</div>
Замена цвета кнопки при наведении (эффект 1)
Создадим кнопку слева.
.buttonLeft {
border-radius: 5px; // скругление
padding: 0 40px; //поля внутри кнопки
overflow: hidden; // скрыть все что выходит за родителя
background: #BA7BA1; // цвет кнопки
position: relative; // установим позицию родителя
line-height: 40px;
color: #fff; // цвет текста
margin-right: 40px; // промежуток между кнопками
}
В качестве заполнения кнопки другим цветом, будет служить псевдоэлемент before. Однако увидеть, как происходит плавная замена одного цвета на другой, можно будет только при наведении на кнопку. Весь фокус состоит в трансформации псевдоэлемента before: из невидимой (-100%) позиции в состоянии покоя в видимую (0) при наведении.
.buttonLeft::before {
content: '';
position: absolute; // позиционировать относительно родителя
left: 0; // координата псевдоэлемента
bottom: 0;
width: 100%;
height: 100%;
transform: translateX(-100%); // прячем псевдоэлемент за родителем
background: #EC008C; // новый цвет
transition: transform .2s ease-in-out; // плавная анимация
}
.buttonLeft:hover::before {
transform: translateX(0); // показываем псевдоэлемент
}
.buttonLeft span {
position: relative;
z-index: 1; // текст сверху
}
Изменение положения кнопки при наведении (эффект 2)
При наведении мыши на центральную кнопку, нужно выпавшую кнопку вернуть обратно в рамку.
// задаем позиционирование
.buttonOverlay {
padding: 10px 25px;
position: relative;
color: #fff;
margin-right: 40px;
}
// рисуем выпавшую кнопку
.buttonOverlay::before {
content: '';
position: absolute;
border-radius: 5px;
height: 100%;
width: 100%;
top: 5px;
right: 5px;
background-color: #BA7BA1;
z-index: -1;
transition: transform .2s ease-in-out;
}
// рисуем пустую рамку
.buttonOverlay::after {
content: '';
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #EC008C;
}
// при наведении возвращаем кнопку в свою рамку
.buttonOverlay:hover::before {
transform: translate(6px, -4px);
}
Нажатая вниз кнопка при наведении (эффект 3)
Этот эффект напоминает сжатую пружину при наведении мыши. Когда мы уводим мышь с кнопки, то пружина отжимается. Весь секрет в обнулении толщины нижней рамки при наведении.
.pressDown {
background-color: #BA7BA1;
padding: 10px 30px;
color: #fff;
border-radius: 5px;
border-bottom: 4px solid #EC008C;
transition: 0.1s;
}
.pressDown:hover{
border-bottom-width: 0; // обнуление толщины рамки
margin-top: 3px;
}
