Смежные кнопки на CSS

Пример:

HTML:

<div class="multi-button">
	<button>Раз</button>
	<button>Два</button>
	<button>Три</button>
    <button>Четыре</button>
	<button>Пять</button>
</div>

<button>Четыре</button>

</div>

CSS:

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

.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;

}

Юрий: 21.12.2022 в 20:15

А как в 2 строки разместить, без интервала?

Ответить
- Alexander: 23.12.2022 в 07:37
  
  Контейнер меньше сделайте.
  Если меню не уместится в 1 строку, перенесется на вторую.
  
  Ответить
Юрий: 21.12.2022 в 20:00

Мне одному кажется, что в примере с кнопкой 5 не всё в порядке?

Ответить
- Alexander: 23.12.2022 в 07:36
  
  А что с ней не так?
  
  Ответить
  - Юрий: 23.12.2022 в 10:59
    
    Мне видится двойная правая сторона прямоугольника
    
    Ответить
    - Alexander: 23.12.2022 в 14:20
      
      Немного подправил, но хром что то хандрит с ней.
      Причем в вакууме нормально все у меня.
      
      Ответить
Пепа Табакова: 19.01.2020 в 08:04

А как поставить гиперссылки в кнопках? Спасибо.

Ответить
- Alexander: 19.01.2020 в 08:31
  В стилях заменить все button на a (можно прям автозаменой)
  В получившемся классе multi-a a добавить:
  
  text-align: center; text-decoration: none;
  
  И соотв. кнопки заменить на ссылки.
  Ответить

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий:

Комментарии: