Как сверстать адаптивную кнопку с элементами по периметру?

Ссылка скопирована
CSS HTML Вёрстка
3 мая 2026 1 ответ

Подскажите, пожалуйста, как можно подойти к верстке такой кнопки с элементами ("лампочками") по периметру? Пытался использовать псевдоэлементы, но не получилось((( Делал наложение одного блока на другой - но тоже не добился желаемого.
Элементы должны менять цвет и прозрачность при наведении. Кнопка может растягиваться и сжиматься.

Как сверстать адаптивную кнопку с элементами по периметру?

Дополнительно:

Элементы должны менять цвет и прозрачность при наведении.

Все или по одному?
Если всё, то, например, на базе такого https://jsfiddle.net/Ankhena/kLr7onyb/

Пытался ..., но не получилось

Что именно не получилось?
И сделайте, пожалуйста, песочницу со всем этим добром.

Ответы:

Ну можете отсюда отталкиваться

border: 5px dotted pink; height: 29px; background-color: red;

border: 5px dotted pink; height: 29px; background-color: red;

https://developer.mozilla.org/en-US/docs/Web/CSS/b...

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Артём Dev Ответ

Для создания адаптивной кнопки с элементами по периметру можно использовать следующий подход:

1. Создайте контейнер для кнопки с помощью HTML:

<div class="button-container">
  <button class="main-button">Нажми меня</button>
  <div class="button-element top"></div>
  <div class="button-element right"></div>
  <div class="button-element bottom"></div>
  <div class="button-element left"></div>
</div>

<div class="button-container"> <button class="main-button">Нажми меня</button> <div class="button-element top"></div> <div class="button-element right"></div> <div class="button-element bottom"></div> <div class="button-element left"></div> </div>

2. Определите стили для контейнера и элементов кнопки в CSS:

.button-container {
  position: relative;
  display: inline-block;
}
 
.button-element {
  position: absolute;
  background-color: #f00; // Цвет элемента кнопки
}
 
.top {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 5px;
}
 
.right {
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
  width: 5px;
  height: 10px;
}
 
.bottom {
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 5px;
}
 
.left {
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
  width: 5px;
  height: 10px;
}

.button-container { position: relative; display: inline-block; } .button-element { position: absolute; background-color: #f00; // Цвет элемента кнопки } .top { top: -5px; left: 50%; transform: translateX(-50%); width: 10px; height: 5px; } .right { top: 50%; right: -5px; transform: translateY(-50%); width: 5px; height: 10px; } .bottom { bottom: -5px; left: 50%; transform: translateX(-50%); width: 10px; height: 5px; } .left { top: 50%; left: -5px; transform: translateY(-50%); width: 5px; height: 10px; }

3. Добавьте стили для основной кнопки:

.main-button {
  padding: 10px 20px;
  background-color: #fff; // Цвет кнопки
  border: 2px solid #000; // Цвет рамки
  border-radius: 5px; // Скругление углов
  color: #000; // Цвет текста
  font-size: 16px;
  cursor: pointer;
}

.main-button { padding: 10px 20px; background-color: #fff; // Цвет кнопки border: 2px solid #000; // Цвет рамки border-radius: 5px; // Скругление углов color: #000; // Цвет текста font-size: 16px; cursor: pointer; }

Теперь у вас есть адаптивная кнопка с элементами по периметру. При изменении размеров окна браузера кнопка будет подстраиваться под новые условия, сохраняя свой внешний вид и функциональность.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ