Как сделать :hover
-эффект, подобный тому, что на скриншоте?
Как вообще сделать такую кнопку?
2 ответа
Для реализации данного эффекта нам понадобится три элемента:
- Блок с текстом
- Блок для подложки с градиентным фоном из двух цветов
- Блок для подложки в виде треугольника на стыке двух цветов
Рассмотрим поэтапно создание нужной вам кнопки. Вот она в разрезе, для наглядности:
Сначала создаем саму кнопку:
<div class="test">Все новости</div>
И стилизуем ее:
.test {
border-radius: 30px;
cursor: pointer;
color: #fff;
font-size: 13px;
line-height: 35px;
text-transform: uppercase;
display: inline-block;
padding-left: 30px;
padding-right: 30px;
/* Скрываем все, что за границами основного блока */
overflow: hidden;
position: relative;
}
Если вставить такой код на сайт, ни текст, ни кнопку на белом фоне видно не будет, поскольку на данном этапе подложка у кнопки отсутствует.
Создадим подложку:
.test::before {
/**
* Двухцветная заливка от золотого к черному.
*
* Цвет определяется дважды, чтобы избежать эффекта градиента
*
* По умолчанию будет видна левая половина блока (золотая)
* При наведении будет видна правая половина блока (черная)
*/
background: linear-gradient(to right, #EABE5B 0%, #EABE5B 50%, #111 50%, #111 100%);
content: '';
position: absolute;
top: 0;
left: 0;
/**
* Подложка должна быть в два раза шире основного блока
*
* Это сделано для того, чтобы при наведении мы могли ее смещать,
* имитируя эффект постепенной смены цвета
*/
width: 200%;
height: 100%;
/* Отрицательный z-index нужен для того, чтобы блок был под текстом */
z-index: -2;
/* Здесь мы определяем скорость анимации заливки */
transition: .3s ease-in-out;
}
.test:hover::before {
/* Смещаем блок с подложкой влево при наведении на основной блок */
margin-left: -100%;
}
На этом можно было бы остановиться, если бы не был нужен скос.
Сделать его можно с помощью второй подложки, содержащей только треугольник нужного цвета, перекрывающего часть основной подложки.
.test::after {
content: '';
/**
* Создаем треугольник размерами чуть больше нашего блока
*
* Нужно организовать небольшое наслоение треугольника
* на правую половину подложки с двухцветным фоном,
* чтобы избежать проблемы с синхронизацией анимации смещения
* блока с двухцветным фоном и этого треугольника
*/
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 40px 40px;
border-color: transparent transparent #111 transparent;
/* Конец стилей треугольника */
position: absolute;
/* Небольшое смещение для наложения на правую половину двухцветного фона */
right: -5px;
top: -5px;
/**
* Отрицательный z-index нужен для того, чтобы блок был под текстом
* В то же время, он должен быть больше, чем у блока с двухцветным фоном
*/
z-index: -1;
/* Скорость анимации должна быть такой же, как и блока с двухцветным фоном */
transition: .3s ease-in-out;
}
.test:hover::after {
/* Смещаем треугольник при наведении одновременно с основной подложкой */
right: 100%;
}
Вся кнопка в сборе:
.test {
border-radius: 30px;
cursor: pointer;
color: #fff;
font-size: 13px;
line-height: 35px;
text-transform: uppercase;
display: inline-block;
padding-left: 30px;
padding-right: 30px;
overflow: hidden;
position: relative;
}
.test::before {
background: linear-gradient(to right, #EABE5B 0%, #EABE5B 50%, #111 50%, #111 100%);
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
z-index: -2;
transition: .3s ease-in-out;
}
.test::after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 40px 40px;
border-color: transparent transparent #111 transparent;
position: absolute;
right: -5px;
top: -5px;
z-index: -1;
transition: .3s ease-in-out;
}
.test:hover::before {
margin-left: -100%;
}
.test:hover::after {
right: 100%;
}
<div class="test">Все новости</div>
div{
width:100px;
height:30px;
position:relative;
background:#999;
text-align:center;
line-height:30px;
color:#fff;
}
div:after{
content:'';
-webkit-transition:.4s;
}
div:after{
content:'';
display:block;
width:0;
height:0;
position:absolute;
left:50%; bottom:0;
background:-webkit-linear-gradient(left,#fff,#ff0000,#fff);
z-index:2;
cursor:pointer;
}
div:hover:after{
content:"нажми";
width:100%;
height:30px;
top:0;
left:0;
}
<div> типа кнопка </div>
можно повесить событие js или jq на эту кнопку
div{
width:300px;
height:300px;
background:#933300;
position:relative;
overflow:hidden;
margin:auto;
}
div:after{
content:'';
position:absolute;
top:70%; left:70%;
width:300px;
height:300px;
background:#660000;
transform:rotate(45deg);
transition:.4s;
}
div:hover:after{
transform:rotate(0);
top:0; left:0;
}
<div></div>
второй пример