带有描述的CSS按钮

Question

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

Working codeply demo

Answer 1

<强> DEMO

您只能使用标记（html）执行此操作：

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

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

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

Answer 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;    
}