Мне надо получить такие кнопки
вопрос: как мне их сделать через css
.
спасибо на ответы.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПример
:root {
--size-skew: 1rem;
}
.btns {
margin-bottom: 1rem;
padding: 1rem;
box-sizing: border-box;
background-color: #C1E532;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.red {
background-color: #f00;
}
.btn {
cursor: pointer;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
padding: 1rem 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background-color: #272727;
color: #fff;
clip-path: polygon(var(--size-skew) 0, 100% 0, 100% calc(100% - var(--size-skew)), calc(100% - var(--size-skew)) 100%, 0 100%, 0 var(--size-skew));
transition: background-color 0.3s ease;
box-sizing: border-box;
}
.btn::before {
content: "";
position: absolute;
inset: 0;
background-color: #272727;
clip-path: polygon(0 var(--size-skew), var(--size-skew) 0, 100% 0, 100% calc(100% - var(--size-skew)), calc(100% - var(--size-skew)) 100%, 0 100%, 0 var(--size-skew), 2px calc(var(--size-skew) + 0.83px), 2px calc(100% - 2px), calc(100% - var(--size-skew) - 0.83px) calc(100% - 2px), calc(100% - 2px) calc(100% - var(--size-skew) - 0.83px), calc(100% - 2px) 2px, calc(var(--size-skew) + 0.83px) 2px, 2px calc(var(--size-skew) + 0.83px));
pointer-events: none;
}
.btn:hover,
.btn:focus,
.btn:active {
background-color: #000;
}
.btn-outline {
color: #272727;
position: relative;
background-color: transparent;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
color: #fff;
}
<div class="btns">
<button class="btn">En</button>
<button class="btn btn-outline">Personal account</button>
</div>
<div class="btns red">
<button class="btn">En</button>
<button class="btn btn-outline">Personal account</button>
</div>
псевдо.элм
но проблема в том что на сайте кнопки в разных блоков и будет выходить так - codepen.io/imergames/pen/bGpGGyx, так что надо будет постояно менять цветпсевдо.элм
, и я подумал пожет есть более удобный способ.