使用html和CSS的按钮徽章

大家好我正试着做这样的事情

我需要它做纽扣

到目前为止，我尝试使用SVG和类似的按钮

<div style="position:relative;">
        <div style="border-radius:50px;background-color:#F3B200;border:2px solid;width:35px;height:35px;position:absolute;left:84%;margin-top:-18px;">
        <center>5</center>
        </div>
        <div>
            <button class="btn btn-success btn-lg" style="width:170px;">
            <center> MYbutton</center>
         </button>
         </div>
         </div> 

5.
我的按钮

---

但这并没有以正确的方式起作用。我需要它的响应能力。

这可能是我能想到的最简单的方法：

为按钮提供自定义的

数据属性。在本例中，我使用了
数据计数
（
计数
部分可以是您想要的任何内容）：

下面是完整的演示


按钮{
背景：线性梯度（底部，rgba（37130188,1）0%，rgba（41137216,1）32%，rgba（41137216,1）42%，rgba（175224234,1）100%）；
宽度：60px；
高度：60px；
边界半径：10px；
边界：无；
边缘顶端：40px；
左边距：40px；
位置：相对位置；
盒影：0.2px 5px rgba（0,0,0,0.4）；
}
按钮：之前{
内容：attr（数据计数）；
宽度：18px；
高度：18px；
线高：18px；
文本对齐：居中；
显示：块；
边界半径：50%；
背景：rgb（67151232）；
边框：1px实心#FFF；
盒影：0 1px 3px rgba（0,0,0,0.4）；
颜色：#FFF；
位置：绝对位置；
顶部：-7px；
左：-7px；
}
按钮。右上角的徽章：在{
左：自动；
右：-7px；
}
按钮。右下角的徽章：之前{
左：自动；
顶部：自动；
右：-7px；
底部：-7px；
}
按钮。左下角的徽章：之前{
顶部：自动；
底部：-7px；
}

“我需要它具有响应性…”：意思是？这可能会帮助您：响应性在我使用twitter引导的意义上，我不希望在屏幕大小更改时徽章移动到另一个位置。那么是否可以为一个按钮添加多个徽章？为什么不？请按照我提供的链接进行操作。很抱歉，这是您的错误，因为回答正确。是否可以为一个按钮添加多个徽章（数据计数）？是的。可以向任何元素添加多个数据属性。但是，您仅限于两个伪元素，
：before
和
：after
<button data-count="5"></button>

button:before {
    content: attr(data-count);
}