Css 带分隔器的引导按钮

我想创建一个内置分隔器的引导按钮

在分隔符的左侧，按钮文本将与左侧对齐。 在分隔器的右侧，将有一个与中心对齐的加号/减号图标。 分隔器始终位于按钮右侧33px处。 分隔器将被涂成白色

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

我无法上传示例图像，因为我没有足够的声誉，但我希望你明白我的意思：）

谢谢你的帮助

---

然后覆盖颜色。

我最终在按钮（一个标签）内定义了一个范围。 span位于按钮的右侧，包含图标。我把它的左边框涂成白色，并加上了右边的填充，这样图标就有足够的空间，可以一直延伸到按钮的顶部

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

结果图像： 试试这个

html

---

我使用fontawesome作为图标。

这里我使用glyphicon

因为

bootstrap按钮

有填充，我们必须删除

填充

，并将其移动到每个

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>

小提琴中的例子：

在图像中预览：

---

任何url或任何JSFIDLE。。我没有完全理解你的问题这似乎是个坏主意。生成的按钮看起来像一个现有的引导控件，称为拆分按钮（在该链接后向下滚动一页）。当分割按钮已经存在时，添加此选项会让用户感到困惑。他们看到了垂直分隔线（或分割按钮），他们会根据单击按钮的哪一侧期待不同的操作。仔细想想。问题是，我不想让它充当两个不同的按钮，而是作为一个按钮。我正在考虑放置一个包含左边框的内部跨距，并为其上色，以创建线条效果（使用填充将边缘放大），最后我使用了另一种技术，如我在回答中所述。但是谢谢你的帮助！

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

.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 */
}

<!-- 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>