如何模糊按钮的轮廓？

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

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>

Answer 2

Select only the button and not the image inside