css - 带分隔线的引导按钮

Question

我想创建一个带有分隔线的引导按钮。

在分隔线的左侧，按钮文本将与左侧对齐。在分隔线的右侧，将有一个与中心对齐的加/减图标。分隔线将始终放置在距离按钮右侧 33px 的位置。分隔线将涂成白色。

创造这种效果的最佳技术是什么？（我更喜欢在图像上使用 css 和字体）。

我无法上传示例图片，因为我没有足够的声誉，但我希望你明白了 :)

谢谢您的帮助！

Answer 1

我最终在按钮内定义了一个跨度（这是一个标签）。跨度位于按钮的右侧并包含图标。我把它的左边框涂成白色，并给了右边的填充，这样它会给图标足够的空间并伸展到按钮的顶部。

CSS代码：

.btn-blue {
    /* Button definintion*/
}

.btn-blue-right-section {
    text-align:center;
    padding: 4px 0 5px 10px;
    margin-left: 10px;
    border-left: 1px solid #86c7fe;
}

.btn-blue-icon {
    color: white;
    width: 13px;
}

结果图像：

Answer 2

http://twitter.github.com/bootstrap/components.html#buttonGroups

<div class="btn-group">
<a class="btn" href="#">Button text</a>
<a class="btn" href="#"><i class="icon-plus"></i></a>
</div>

并且只是覆盖颜色。

Answer 3

我在这里使用 glyphicon。

因为bootstrap button有填充，我们必须删除 并将其padding移动到 each span。

.btn-nopadding{
    padding: 0px;
    font-size: 24px; /* optional */
}
.btn-padding{
    padding: 20px 20px 25px 20px;
}

/* if you want divider to left / logo at right */
.btn-divider-left{
    border-left: 1px solid #1e4d76; /* set your color here */
}

/* if you want divider to right / logo at left */
.btn-divider-right{
    border-right: 1px solid #1e4d76; /* set your color here */
}

这是html

<!-- example for left divider / logo at right -->

<a href="#" class="btn btn-primary btn-lg btn-nopadding">
    <span class="btn-padding">BUTTON NAME</span>
    <span class="glyphicon glyphicon-plus btn-divider-left btn-padding"></span>
</a>

<!-- example for right divider / logo at left -->

<a href="#" class="btn btn-primary btn-lg btn-nopadding">
    <span class="glyphicon glyphicon-plus btn-padding btn-divider-right"></span>
    <span class="btn-padding">BUTTON NAME</span>
</a>

小提琴中的示例：小提琴预览

在图像中预览：

Answer 4

尝试这个

html

<button type="button" class="btn bg-blue fs-it-btn text-uppercase" aria-label="Left Align">Click me <span class="fs-it-btn-vertical-line"></span><i class="fa fa-plus" aria-hidden="true"></i></button>

css

.fs-it-btn {
  margin-top: 10px;
  border: 1px solid #a2a2a2;
  border-radius: 0;
  color: #fff;
  font-weight: bold;
}
.fs-it-btn-vertical-line {
  text-align:center;
  padding: 4px 0 5px 10px;
  margin-left: 10px;
  border-left: 1px solid #a2a2a2;
}
.bg-blue {
    background-color: #2c9deb;
}
.text-uppercase {
    text-transform: uppercase;
}

我使用 fontawesome 作为图标。