<button id="button" class="button">
  <img class="img" src="https://mahata.gitlab.io/img/favicon.png" />
</button>


.button {
  height: 100px;
  width: 100px;
  cursor: pointer;

  padding: 0;
  border: none;

  .img {
    width: 100%;
    height: 100%;
  }
}

.buttonClick::before {
  display: block;
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid red;
  box-sizing: border-box;
}
View Compiled 
const button = document.getElementById("button");

button.addEventListener("click", function() {
  this.classList.toggle("buttonClick")
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.