Пример:
HTML:
|
1 2 3 4 5 6 7 |
<div class="multi-button"> <button>Раз</button> <button>Два</button> <button>Три</button> <button>Четыре</button> <button>Пять</button> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.multi-button { display: flex; flex-wrap: wrap; width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.1); border: 1px solid #337AB7; background-color: #337AB7; } .multi-button button { flex-grow: 1; cursor: pointer; position: relative; padding: 10px 20px; border: 1px solid #337AB7; color: #337AB7; background-color: #FFF; font-size: 18px; line-height: 18px; font-family: Verdana, sans-serif; transition: flex-grow 250ms cubic-bezier(0.215, 0.61, 0.355, 1); } .multi-button button:hover, .multi-button button:focus { flex-grow: 2; color: #FFF; outline: none; background-color: #337AB7; } .multi-button:hover button:focus:not(:hover) { flex-grow: 1; background-color: #FFF; color: #337AB7; } .multi-button button:active { transform: scale(1.2); z-index: 2; } |
А как в 2 строки разместить, без интервала?
Контейнер меньше сделайте.
Если меню не уместится в 1 строку, перенесется на вторую.
Мне одному кажется, что в примере с кнопкой 5 не всё в порядке?
А что с ней не так?
Мне видится двойная правая сторона прямоугольника
Немного подправил, но хром что то хандрит с ней.
Причем в вакууме нормально все у меня.
А как поставить гиперссылки в кнопках? Спасибо.
В стилях заменить все [b]button[/b] на [b]a[/b] (можно прям автозаменой)
В получившемся классе [b]multi-a a[/b] добавить:
[code]text-align: center;
text-decoration: none;[/code]
И соотв. кнопки заменить на ссылки.