javascript - 使用 css 创建一个具有描述的按钮

Question

我正在寻找这样的东西

按钮有一个简短的描述($10 USD)。谁能帮我创建一个？

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

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

这是 fiddle

http://jsfiddle.net/wLmbw/

Answer 1

如果它是静态内容，您可以通过 :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/

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