Как такую кнопку сделать на чистом css?
и
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВариант первый. Минимум усилий, но и не так красиво.
HTML
<span class="button up"></span>
<span class="button nav"></span>
CSS
.button {
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
vertical-align: top;
color: #fff;
border: 1px solid #5b5b5b;
}
.up::before {
content: '\2227';
line-height: 40px;
font-size: 1.7em;
}
.nav::before {
content: '\2261';
font-size: 2em;
font-weight: bold;
}
Вариант второй. Тут уже потребуются дополнительные элементы, больше расчетов, но результат будет получше.
HTML
<span class="button up">
<span></span>
<span></span>
</span>
<span class="button nav">
<span></span>
<span></span>
<span></span>
</span>
CSS
.button {
position: relative;
display: inline-block;
vertical-align: top;
color: #fff;
border: 1px solid #5b5b5b;
}
.button > span {
display: block;
width: 22px;
height: 3px;
background-color: #fff;
border-radius: 1px;
}
.up {
width: 50px;
height: 50px;
}
.up > span {
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 4px;
margin-top: 2px;
margin-left: -7px;
transform-origin: right bottom;
transform: rotate(45deg);
}
.up > span:first-child {
margin-left: -9px;
transform-origin: left bottom;
transform: rotate(-45deg);
}
.nav {
padding: 12px;
}
.nav > span {
margin: 4px auto;
}