[SOLVED] Circle cut out with fully transparent border?

Circle cut out with fully transparent border?

I am working on a project that has a contact-us button. This button requires a status indication. I've read the following article that shows a status indication on a avatar image. The cool thing about this is dat is has a border that is fully transparent (it also cuts the part of the image that lays under the border of the indicator).

I want to accomplish the same thing, but with a button element, but I have no idea how to do this.

Simple version of my code:

button {
  border-radius: 50%;
  width: fit-content;
  aspect-ratio: 1;
  border: none;
  background-color: purple;
  padding: 1rem;
}

<button>
    <img src="chat.svg" width="50px" />
</button>

I tried to change the tags and classes to the tags and classes corresponding to my document, but it messes up the whole thing. I found out that the mask-property does not apply on anything else than an image (if i'm correct). I'm nog using any images, so that makes it had to understand and find an alternative.

Solution

That code is designed to work with images but with buttons we can do easier

button {
  --g: 5px;  /* gap */
  --r: 20px; /* circle size*/

  font-size: 30px;
  padding: .5em 1em;
  border-radius: .25em;
  border: none;
  background: 
   radial-gradient(calc(var(--r)/2 + var(--g)) at 100% 100%,
   #0000 95%,red);
  border-image:
    radial-gradient(50% 50%,blue 95%,#0000) 
    100%/0 var(--r) var(--r) 0/
    0 calc(var(--r)/2) calc(var(--r)/2) 0;
}

<button>Button</button>

If you want to understand the border-image syntax, read my article: https://www.smashingmagazine.com/2024/01/css-border-image-property/