带有描述的 CSS 按钮

【问题标题】：CSS button with description带有描述的 CSS 按钮
【发布时间】：2015-03-16 10:53:28
【问题描述】：

我正在尝试使用引导按钮和自定义 css 来实现以下目标。我不确定如何使用按钮添加分隔符并在其中包含两组标签。到目前为止，我可以创建一个带有标签的按钮。

Working codeply demo

【问题讨论】：

@CristianMatthiasAmbæk 是的，这就是我想要实现的目标，但可以点击
在包含产品和标签信息的 div 周围放置标签将使其可点击。

标签： html css twitter-bootstrap button

【解决方案1】：

DEMO

您只能使用标记 (html) 来做到这一点：

<button>
    <h4>Titel</h4>
    <hr/>
    <span>More</span>
</button>

但这看起来有点奇怪，所以通过添加一些 css 使它看起来更好。

button span {
    font-size: 0.7em;
}
button hr {
    margin: 2px;
}

【讨论】：

【解决方案2】：

试试这个， Demo

.productButton.selected {
    background-color: rgb(0, 146, 143);
    color: #FFF;
}
.productBtnText{
    font-size:25px;
    border-radius:0;
    width:100%;
    border-bottom:2px solid #000;
 }

.productButton{
    border:2px solid #000;    
    margin:0px;
    padding:0;
    height: 100px;
    width: 200px;
    font-size: 15px;
    white-space: normal;
    position: relative;    
}

【讨论】：