使用css创建一个包含描述的按钮

Question

我正在寻找像这样的东西

按钮有一个小描述（10美元）。任何人都可以帮我创建一个吗？

我有一个这样的锚点按钮。任何人都可以帮我用css创建这样的描述吗？

<a style="float:right" class="iframe button pink" href="">Pay Now</a>

这是小提琴

http://jsfiddle.net/wLmbw/

Answer 1

添加另一个html元素，如左边的图片， 用css定位它 并使用javacsript填充正确的值

Answer 2

您可能需要这些内容：

HTML：

<a style="float:right" class="iframe button pink" href="">
<span class="label">10 USD</span>Pay Now</a>

CSS

.pink{
    position:relative;
}
.label
{
    box-sizing:border-box;
    text-align:center;
    position:absolute;
    right:105%;
    bottom: -1px;
    padding-bottom:5px;
    padding-top:5px;
    display:inline-block;
    width: 50px;
    height: 18px;
    background-color:pink;
    border-radius:5px;
    border:1px solid black;
}

JSFiddle

Answer 3

我猜你知道如何设置div或span元素的样式。将其放在按钮旁边，然后将其设置为css.display:none。当用户将鼠标悬停在按钮上时，请使用javascript ...

将其设置为css.display:block

Answer 4

如果是静态内容，您可以通过：before元素添加一个小容器。

.button.pink{
    position: relative;
}

.button.pink:before{
    position: absolute;
    left: -90%;
    top: 0;
    display: block;
    padding: 10px;
    width: 30px;
    height: 10px;
    content: "$10";
    background: #6FCC49;
    border: 1px solid #679500;
    color: white;
    text-shadow: 1px 1px 0 #679500;
    border-radius: 5px;
    text-align: center;
}

http://jsfiddle.net/etasf/2/

这可能会被清除 - 这只是我的快速运行。