[css] 트위터 부트 스트랩 버튼 스타일링

가장 간단한 방법은 이것을 재정의에 넣는 것입니다. 상상할 수없는 색을 선택해서 미안해

부트 스트랩 4- 알파 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

부트 스트랩 4 알파 SASS 예

부트 스트랩 3 적게

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

Bootstrap 3 LESS 예제

부트 스트랩 3 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

부트 스트랩 3 SASS 예

부트 스트랩 2.3 덜

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

부트 스트랩 2.3 LESS 예제

부트 스트랩 2.3 SASS

.btn-primary {
  //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 
  @include buttonBackground(red, white);
}

호버 / 액티브를 처리합니다.

주석에서 검정색을 사용할 때 어둡게하는 대신 버튼을 밝게하려면 (또는 반대로하려면) 클래스를 다음과 같이 조금 더 확장해야합니다.

부트 스트랩 3 SASS Ligthen

.my-btn {
  // @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  $color: #fff;
  $background: #000;
  $border: #333;
  @include button-variant($color, $background, $border);
  // override the default darkening with lightening
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: lighten($background, 20%); //10% default
    border-color: lighten($border, 22%); // 12% default
  }
}

부트 스트랩 3 SASS Lighten 예