Как сверстать такую кнопку ?
На :hover должна отзываться вся кнопка.
<button>default</button>
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществу* {
box-sizing: border-box;
}
button {
background: transparent;
border: 2px solid #000;
padding: 10px 75px 10px 45px;
position: relative;
transition: 0.3s;
}
button:after {
content: '›';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 30px;
line-height: 30px;
font-size: 26px;
border-left: 2px solid #000;
}
button:hover {
background: #000;
color: #fff;
}
button:hover:after {
border-left-color: #fff;
}
<button>default</button>
Единственное, что элементу :after тоже стоило бы transition добавить
* {
box-sizing: border-box;
}
button {
background: transparent;
border: 2px solid #000;
padding: 10px 75px 10px 45px;
position: relative;
transition: 0.3s;
}
button:after {
content: '›';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 30px;
line-height: 30px;
font-size: 26px;
border-left: 2px solid #000;
transition: 0.3s;
}
button:hover {
background: #000;
color: #fff;
}
button:hover:after {
border-left-color: #fff;
}
<button>default</button>