SORU
18 Mayıs 2012, Cuma


Tasarım twitter bootstrap düğmeleri

Twitter-Bootstrap düğmeleri dehşet güzel. Try them out by scrolling over them

bootstrap button screenshot

Ama renkler oldukça sınırlıdır.

Güzel-gelin bootstrap o kadar güzel ve zahmetsiz yaptı etkisi tutarken düğmesine taban Renk Değiştirme şansım var mı?

Css/javascript twitter bu etkileri sağlamak için kullanır gibi görünüyor ne olduğundan tamamen habersiz değilim.

CEVAP
5 Ocak 2013, CUMARTESİ


En basit yolu geçersiz kılar bu koymaktır buldum. Renksiz bir renk seçimim için özür dilerim

4-Alpha SASS Bootstrap

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

Bootstrap 4 Alpha SASS Example

AZ 3 Bootstrap

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

Bootstrap 3 LESS Example

Bootstrap 3 SASS

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

Bootstrap 3 SASS Example

Bootstrap 2.3 daha AZ

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

Bootstrap 2.3 LESS Example

Bootstrap 2.3 SASS

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

Sizin için vurgulu/aktif ilgilenir

Eğer siyah (veya sadece ters istiyorum) kullanırken düğmesine hafifletmek yerine karartmak istiyorsanız yorum, sınıfı biraz daha çok gibi genişletmek gerekir:

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

Bootstrap 3 SASS Lighten Example

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Doc Adams

    Doc Adams

    20 HAZİRAN 2007
  • EminemMusic

    EminemMusic

    9 ŞUBAT 2007
  • SelmerSaxMan

    SelmerSaxMan

    24 HAZİRAN 2006