0

Как такую кнопку сделать на чистом css?

alt text и alt text

1 ответ 1

0

Вариант первый. Минимум усилий, но и не так красиво.

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;
}
0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.