使用html和CSS的按钮徽章 [英] Badges For Buttons using html and CSS

问题描述

大家好我想做这样的事情

Hello everyone I am trying to do something like this

我需要它用于按钮

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

so far I tried it using SVG and buttons something like this

<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> 

但这不能正常运作。我需要它才能做出回应。

But this does not work in a proper way. I need it to be responsive .

推荐答案

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

This is probably the simplest way I can think of:

为您的按钮提供自定义数据属性。在这种情况下，我使用数据计数（计数部分可以是你想要的任何东西）：

Give your button a custom data attribute. In this case I've used data-count (the count part could be anything you wish):

<button data-count="5"></button>

使用data属性的值作为内容 ：之前伪元素：

Use the value of the data attribute as the content of a :before pseudo element:

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

以下完整演示....

Full demo below....

button {
    background: linear-gradient(to bottom, rgba(37,130,188,1) 0%,rgba(41,137,216,1) 32%,rgba(41,137,216,1) 42%,rgba(175,224,234,1) 100%);
    width: 60px;
    height: 60px;
    border-radius: 10px;
    border: none;
    margin-top: 40px;
    margin-left: 40px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

button:before {
    content: attr(data-count);
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: block;
    border-radius: 50%;
    background: rgb(67, 151, 232);
    border: 1px solid #FFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    color: #FFF;
    position: absolute;
    top: -7px;
    left: -7px;
}

button.badge-top-right:before {
    left: auto;
    right: -7px;
}

button.badge-bottom-right:before {
    left: auto;
    top: auto;
    right: -7px;
    bottom: -7px;
}

button.badge-bottom-left:before {
    top: auto;
    bottom: -7px;
}

<button data-count="5"></button>
<button data-count="5" class="badge-top-right"></button>
<button data-count="5" class="badge-bottom-right"></button>
<button data-count="5" class="badge-bottom-left"></button>

这篇关于使用html和CSS的按钮徽章的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！