我正在开发一个带有“联系我们”按钮的项目。该按钮需要状态指示。我读过以下文章,其中显示了头像图像上的状态指示。最酷的一点是它有一个完全透明的边框(它还剪切了位于指示器边框下方的图像部分)。
我想完成同样的事情,但是使用按钮元素,但我不知道如何做到这一点。
我的代码的简单版本:
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>
我尝试将标签和类更改为与我的文档相对应的标签和类,但它弄乱了整个事情。我发现 mask-property 不适用于图像以外的任何东西(如果我是正确的)。我不使用任何图像,因此它必须理解并找到替代方案。