Bootstrap에서 btn 색상을 변경하는 방법

Bootstrap에서 btn 색상을 변경하는 방법

---

.btnBootstrap의 모든 속성 을 변경하는 방법이 있습니까? 나는 아래에서 시도했지만 여전히 때로는 기본 파란색이 표시됩니다 (마우스를 클릭하고 제거한 후 등). 전체 테마를 모두 변경하려면 어떻게해야합니까?

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2;
}

---

재정의해야하는 속성을 확인하는 가장 쉬운 방법은 Bootstrap의 소스 코드 , 특히 mixins / buttons.less에.button-variant 정의 된 mixin을 살펴 보는 것 입니다. 모든 .btn-primary스타일링 (예 : :focus, disabled드롭 다운에서의 사용 등)을 제거하려면 여전히 많은 속성을 재정의해야합니다 .

더 나은 방법은 다음과 같습니다.

1. Bootstrap의 온라인 사용자 지정 도구를 사용하여 사용자 지정 버전의 Bootstrap을 만듭니다.
2. 자신 만의 색상 클래스를 수동으로 생성합니다. .btn-whatever
3. LESS 컴파일러를 사용하고 .button-variantmixin을 사용하여 고유 한 색상 클래스를 만듭니다..btn-whatever

---

부트 스트랩의 기본 속성을 재정의하려면 속성을 중요하게 만들어야합니다.

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

이것이 당신에게 효과가 있기를 바랍니다.

---

난 당신이 잊고 추측 .btn-primary:focus후 재산 및 쉼표 .btn-primary

도 덜 사용하고 variables.less 파일에 약간의 색상을 다시 정의 할 수 있습니다 당신은

당신의 코드는 다음과 같이 될 것입니다 염두에두고 :

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: #8064A2;
    border-color: #8064A2;
}

---

2019 Bootstrap 4 업데이트

이제 Bootstrap 4가 SASS를 사용하므로 믹스 인을 사용하여 기본 버튼 색상 을 쉽게 변경할 수 있습니다 button-variant.

$mynewcolor:#77cccc;

.btn-primary {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-primary {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

https://www.codeply.com/go/2bHYxYSC0n ( SASS 데모 )

이 SASS는 다음 CSS로 컴파일됩니다.

.btn-primary {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:hover {
    color: #212529;
    background-color: #52bebe;
    border-color: #8ad3d3
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #9cdada;
    border-color: #2e7c7c
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-outline-primary {
    color: #7cc;
    background-color: transparent;
    background-image: none;
    border-color: #7cc
}

.btn-outline-primary:hover {
    color: #222;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #7cc;
    background-color: transparent
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #212529;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

https://www.codeply.com/go/lD3tUE01lo ( CSS 데모 )

---

To change the primary color for all classes see: Customizing Bootstrap CSS template and How to change the bootstrap primary color?

---

Just create your own button on:

• http://blog.koalite.com/bbg/
• add the CSS at the end off your boottrap.min.css

Cheers

---

You have missed one style ".btn-primary:active:focus" which causes that still during btn click default bootstrap color show up for a second. This works in my code:

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
background-color: #8064A2;}

---

I had run into the similar problem recently, and managed to fix it with adding classes

  body .btn-primary {
    background-color: #7bc143;
    border-color: #7bc143;
    color: #FFF; }
    body .btn-primary:hover, body .btn-primary:focus {
      border-color: #6fb03a;
      background-color: #6fb03a;
      color: #FFF; }
    body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
      border-color: #639d34;
      background-color: #639d34;
      color: #FFF; }

Also pay attention to [disabled] and [disabled]:hover, if this class is used on input[type=submit]. Like this:

body .btn-primary[disabled], body .btn-primary[disabled]:hover {
  background-color: #7bc143;
  border-color: #7bc143; }

---

I think using !important is not a very wise option. It may cause for many other issues specially when making the site responsive. So, my understanding is that, the best way to do this to use custom button CSS class with .btn bootstrap class. .btn is the base style class for bootstrap button. So, keep that as the layout, we can change other styles using our custom css class. One more extra thing I want to mention here. Some people are trying to remove blue outline from the buttons. It's not a good idea because that accessibility issue when using keyboard. Change it's color using outline-color: instead.

---

Remove the button color class like "btn-success" and put a custom class like "btn-custom" and write css for that class. That simply works for me.

HTML :

<button class="btn btn-block login " type="submit">Sign In</button>

CSS:

 .login  {
    background-color: #0057fc;
    color: white;   
}

---

Here's my flavor without the loss of hover. I personally like it better than the standard bootstrap transitioning!

.btn-primary, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

.btn-primary:hover {
    background-color: #594671 !important;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
}

ReferenceURL : https://stackoverflow.com/questions/28261287/how-to-change-btn-color-in-bootstrap