css - How to blur the outline of button?

Question

I am trying to blur the outline of a button without blurring the inside image. The blur filter only applies to the whole image, but I only want the blue outline to be blurred. basically apply the filter: blur(4px) but only on the outline

 button:focus {
  outline-color: #054EBA;
  outline-width: 2px;
  outline-offset: 5px;
}

What I have What I want

question from:https://stackoverflow.com/questions/65890593/how-to-blur-the-outline-of-button

Answer 1

You need to dispatch the blur effect to another container, it can be pseudo container.

example

button {
  position: relative;
  margin: 3em;
  padding: 0em 0.35em;
  color: white;
  background: #000;
  border-radius: 50%;
  border: none;
  font-size:2em;
}

button:focus:after {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
  pointer-events: none;
  border: solid #054eba 2px;
  filter: blur(2px);
}

<button>?</button>