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

Question

[SaggyA]

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

Comments

[Ankhena]

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

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

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

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

Answer 1

[Nik Faraday]

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

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

Answer 2

[Sergei Nazarenko]

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