Для создания кнопки, которая будет реагировать на изменения размера экрана и иметь элементы расположенные по всему периметру, можно использовать CSS Grid или Flexbox для управления расположением элементов на кнопке. Эти технологии позволяют гибко управлять размещением элементов на странице и адаптировать их под разные размеры экранов.
Например, вот пример создания кнопки с помощью CSS Grid:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивная кнопка с элементами по периметру</title>
<style>
.button {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
height: 200px;
width: 200px;
background-color: #f0f0f0;
}
.button div {
background-color: #333;
opacity: 0.7;
}
.button div:hover {
background-color: #ffcc00;
opacity: 1;
}
.button div:nth-child(1) {
grid-column: 1 / -1;
}
.button div:nth-child(2) {
grid-row: 1 / -1;
}
</style>
</head>
<body>
<div class="button">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
```
В данном примере создается кнопка с размерами 200x200 пикселей, разделенная на 4 равные части с помощью CSS Grid. Элементы кнопки меняют свой цвет и прозрачность при наведении на них курсора. Также, адаптирование к изменению размера кнопки происходит автоматически благодаря использованию относительных единиц измерения и CSS Grid.
Чтобы элементы кнопки были по всему ее периметру, можно добавить еще необходимое количество элементов внутри `.button` и задать им соответствующее позиционирование с помощью CSS Grid.
Для более сложных эффектов, таких как анимация изменения цвета или прозрачности при наведении, можно использовать CSS transitions или анимации.