Проблема с box-sizing при верстке кнопки на Bootstrap 3

Shol · 06.10.2015

Здравствуйте.
Использую исходники Bootstrap 3 и Less. Как правильно задать скругленную рамку для кнопки? Думаю, что здесь проблема з box-sizing:border-box;
Нужно сверстать кнопку как на макете:

У меня получилось:

Вот код:
HTML:

<div class="col-md-4">
<button class="btn-sale">Want to work with us?</button>
</div>

Less:

.btn-sale {
color: #ffffff;
#gradient.vertical(#f98c54; #f45604);
font-size: 20px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
padding: 5px 25px;
border: 7px solid rgba(233, 226, 215, 0.4);
}

Как сверстать такую кнопку на Bootstrap?

Volly · 06.10.2015

А если вместо бордера у btn-sale задать бордер для col-md-4?

BaNru · 06.10.2015

Тут скорее не box-sizing виноват, а присутствует overflow hidden, вероятно у родителя (col-md-4).
При этом, наверное, col-md-4 и btn-sale указаны одной высоты, а надо для col-md-4 указывать btn-sale height + btn-sale border

Shol · 07.10.2015

Volly сказал(а):
А если вместо бордера у btn-sale задать бордер для col-md-4?

col-md-4 это класс Bootstrap. Добавил блок с класом .wrap и прописал стили:
Less:

.wrap {
border: 7px solid rgba(100, 100, 100, 0.1);
display: inline-block;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
overflow: hidden;

.btn-sale {
color: #ffffff;
#gradient.vertical(#f9a87f; #f45604);
font-size: 20px;
padding: 7px 30px;
border: none;
}
}

Таким способом получилось. Спасибо!

Проблема с box-sizing при верстке кнопки на Bootstrap 3

Shol

Новичок

Volly

Well-Known Member

BaNru

Пацифизжу

Shol

Новичок

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей