Как это реализовать для кнопки?

Question

Не могу понять как это реализовать? outline должен оставаться none!

при клике появляется фиолетовый бордер, при отпускании кнопки мыши он растягивается и остается в таком положении

Answer 1

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

.img-container {
  user-select: none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  transition: padding 0.2s ease;
}

.img-container::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid red;
  border-radius: 50%;
  transform: translateZ(0);
}

.img-container > img {
  border-radius: 50%;
}

.img-container:active {
  padding: 10px;
}

<div class="img-container">
  <img src="https://picsum.photos/70">
</div>

Answer 2

А почему бы это не сделать проще? Нужно же для кнопки. Например, так:

button {
  position: relative; box-sizing: border-box; margin: 20px; padding: 0;
  outline: none; border: none; cursor: pointer;
  width: 80px; height: 80px; border-radius: 100%;
  background: url(https://picsum.photos/70);
}

button:before {
  content: ''; display: block; box-sizing: border-box;
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border: 3px solid #9d5cd0; border-radius: 100%;
  transition: transform 0.2s; transform: scale(1);
}

button:active {transform: scale(1);}
button:active:before {transform: scale(1.3);}

<button></button>

upd.

const btn = document.querySelector("button");
btn.onclick = function() {btn.classList.toggle("goo");}

button {
  position: relative; box-sizing: border-box; margin: 20px; padding: 0;
  outline: none; border: none; cursor: pointer;
  width: 80px; height: 80px; border-radius: 100%;
  background: url(https://picsum.photos/70);  background-size: contain;
}

button:before {
  content: ''; display: block; box-sizing: border-box; position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border-radius: 100%;
  transition: transform 0.2s; transform: scale(1);
}

button:active:before {border: 3px solid #9d5cd0;}
.goo {transform: scale(1);}
.goo:before {transform: scale(1.3); border: 3px solid #9d5cd0;}

<button class="button"></button>

БЛОГ НА HUSL

Как это реализовать для кнопки?

Ответы (2 шт):