我有一个自举方式的自定义按钮:
.btn
{
background-color: #DB631E;
border-color: #DB631E;
}
.btn-custom {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
width: 170px;
height:120px;
border-style: solid;
border-bottom-color:#1252cf;
border-bottom-width: 5px;
font-size: 22px;
padding: 47px 22px;
}
.btn-custom:focus,
.btn-custom.focus {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
}
.btn-custom:hover {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
width: 200px;
height:150px;
border-style: solid;
border-bottom-color:#1252cf;
border-bottom-width: 5px;
}
.btn-custom:active,
.btn-custom.active,
.open > .dropdown-toggle.btn-custom {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
}
.btn-custom:active:hover,
.btn-custom.active:hover,
.open > .dropdown-toggle.btn-custom:hover,
.btn-custom:active:focus,
.btn-custom.active:focus,
.open > .dropdown-toggle.btn-custom:focus,
.btn-custom:active.focus,
.btn-custom.active.focus,
.open > .dropdown-toggle.btn-custom.focus {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
}
.btn-custom:active,
.btn-custom.active,
.open > .dropdown-toggle.btn-custom {
background-image: none;
}
.btn-custom.disabled,
.btn-custom[disabled],
fieldset[disabled] .btn-custom,
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled.focus,
.btn-custom[disabled].focus,
fieldset[disabled] .btn-custom.focus,
.btn-custom.disabled:active,
.btn-custom[disabled]:active,
fieldset[disabled] .btn-custom:active,
.btn-custom.disabled.active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom.active {
background-color: #8F101A;
border-color: #8F101A;
}
.btn-custom .badge {
color: #5bc0de;
background-color: #fff;
}

<button type="button" class="btn btn-custom">Default</button>
&#13;
这是我的jsfiddle。
如何使蓝色底部边框占底部边框宽度的70%并居中?
目前它与底部边界的宽度相同。
我的引导版本是
Bootstrap v3.3.5
答案 0 :(得分:1)
只需从按钮上移除边框并添加伪元素(高度为5px,宽度为70%,背景颜色和位置正确)
.btn
{
background-color: #DB631E;
border-color: #DB631E;
}
.btn-custom {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
width: 170px;
height:120px;
font-size: 22px;
padding: 47px 22px;
position: relative;
}
.btn-custom:before {
content: '';
position: absolute;
height: 5px;
left: 50%;
bottom: -5px;
width: 70%;
transform: translateX(-50%);
background-color: blue;
}
.btn-custom:focus,
.btn-custom.focus {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
}
.btn-custom:hover {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
width: 200px;
height:150px;
}
.btn-custom:active,
.btn-custom.active,
.open > .dropdown-toggle.btn-custom {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
}
.btn-custom:active:hover,
.btn-custom.active:hover,
.open > .dropdown-toggle.btn-custom:hover,
.btn-custom:active:focus,
.btn-custom.active:focus,
.open > .dropdown-toggle.btn-custom:focus,
.btn-custom:active.focus,
.btn-custom.active.focus,
.open > .dropdown-toggle.btn-custom.focus {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
}
.btn-custom:active,
.btn-custom.active,
.open > .dropdown-toggle.btn-custom {
background-image: none;
}
.btn-custom.disabled,
.btn-custom[disabled],
fieldset[disabled] .btn-custom,
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled.focus,
.btn-custom[disabled].focus,
fieldset[disabled] .btn-custom.focus,
.btn-custom.disabled:active,
.btn-custom[disabled]:active,
fieldset[disabled] .btn-custom:active,
.btn-custom.disabled.active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom.active {
background-color: #8F101A;
border-color: #8F101A;
}
.btn-custom .badge {
color: #5bc0de;
background-color: #fff;
}
&#13;
<button type="button" class="btn btn-custom">Default</button>
&#13;
答案 1 :(得分:1)
不要使用边框,而是使用绝对定位的伪元素:
.btn
{
background-color: #DB631E;
border-color: #DB631E;
}
.btn-custom {
position: relative;
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
width: 170px;
height:120px;
font-size: 22px;
padding: 47px 22px;
}
.btn-custom:after {
content: "";
position: absolute;
bottom: 0;
left: 15%;
right: 15%;
height: 5px;
background: #1252cf;
}
.btn-custom:focus,
.btn-custom.focus {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
}
.btn-custom:hover {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
width: 200px;
height:150px;
}
.btn-custom:active,
.btn-custom.active,
.open > .dropdown-toggle.btn-custom {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
}
.btn-custom:active:hover,
.btn-custom.active:hover,
.open > .dropdown-toggle.btn-custom:hover,
.btn-custom:active:focus,
.btn-custom.active:focus,
.open > .dropdown-toggle.btn-custom:focus,
.btn-custom:active.focus,
.btn-custom.active.focus,
.open > .dropdown-toggle.btn-custom.focus {
color: #D0D4D2;
background-color: #8F101A;
border-color: #8F101A;
}
.btn-custom:active,
.btn-custom.active,
.open > .dropdown-toggle.btn-custom {
background-image: none;
}
.btn-custom.disabled,
.btn-custom[disabled],
fieldset[disabled] .btn-custom,
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled.focus,
.btn-custom[disabled].focus,
fieldset[disabled] .btn-custom.focus,
.btn-custom.disabled:active,
.btn-custom[disabled]:active,
fieldset[disabled] .btn-custom:active,
.btn-custom.disabled.active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom.active {
background-color: #8F101A;
border-color: #8F101A;
}
.btn-custom .badge {
color: #5bc0de;
background-color: #fff;
}
<button type="button" class="btn btn-custom">Default</button>
(注意:我没有费心去改变悬停颜色;当然你必须用伪元素的背景颜色替换边框颜色。)