CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
passion
passion

Reputation: 1020

bootstrap button bottom border width be percentage

I have a custom button in bootstrap fashion:

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

here is my jsfiddle.

Question:

how to make that blue bottom border be 70% of the total bottom border width and to be centered?
Currently it is the same width of the total bottom border.

my bootstrap version is

Bootstrap v3.3.5

Upvotes: 1

Views: 1623

Answers (2)

C3roe
C3roe

Reputation: 96363

Don’t use a border, but an absolutely positioned pseudo element:

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

(Note: I did not bother to change the hover color; you’ll of course have to replace the border-color with a change of the background color of the pseudo element.)

Upvotes: 1

max
max

Reputation: 8687

Just remove the border from your button and add pseudo element (with 5px height, 70% width, proper background color and position)

.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;
}
<button type="button" class="btn btn-custom">Default</button>

Upvotes: 1

Related Questions