https://codepen.io/SynteticCat/pen/ErbKWb?editors=0100 - Придумываю hover effects для кнопок.
Однако для кнопки с классом effect-1 возникла проблема.
Исходный код для позиционирования:
HTML<div class="box">
<div class="item effect-1">CSS</div>
</div>
CSS.box {
position: relative;
z-index: 1;
}
.item {
position: absolute;
z-index: 1;
}
.item.effect-1:after,
.item.effect-1:before {
content: "";
position: absolute;
z-index: -1;
Мне хотелось бы сделать так, чтобы появлялся задний слайдер, который выполнен на CSS и кнопка при наведении на нее перемещалась в правую сторону этого слайдера.
Вы поймете, что я имею ввиду, когда зайдете на страницу с исходным кодом -
https://codepen.io/SynteticCat/pen/ErbKWb?editors=1100.
1 проблема:
Двигаются и псевдоэлементы и кнопка при срабатывании hover!
Поэтому мне приходится отдельно задавать hover: after и hover: before, чтобы они оставались на своих местах.
2 проблема:
Псевдоэлементы перекрывают фон кнопки [сам текст не перекрывается - что для меня тоже загадка]