CSS 带有说明的按钮

Question

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

Answer 1

您只能使用标记 (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;    
}

CSS 带有说明的按钮

CSS button with description

html

css

button

twitter-bootstrap