Membuat Button Custom dengan Mixins SCSS

Ketika kita ingin mengembangkan sebuah website salah satu yang harus di perhatikan adalah menentukan tema dan gaya seperti apa yang ingin kita terapkan ke dalam website kita. Salah satunya adalah pemilihan jenis button selain dari pemilihan jenis font dan warna yang digunakan.

Kali ini kita akan coba membuat button custom sesuai kebutuhan kita menggunakan scss dengan metode mixins.

Sebelum masuk ke button dan variannya kita pilih terlebih dahulu warna yang akan kita gunakan ke dalam ../scss/variables/color.scss seperti contoh berikut

Button Colors

$as-white: #ffffff;

// Primary
$as-orange-100: #ffe082;
$as-orange-200: #ff9800;
$as-orange-300: #ed8e01;

// Secondary
$as-blue-100: #e0efff;
$as-blue-200: #94ccf7;
$as-blue-300: #2199fa;

// Danger
$as-red-100: #fbb2b2;
$as-red-200: #fd8ca9;
$as-red-300: #c92d2d;

// Shadow
$as-shadow-orange-100: 0px 4px 6px rgba(255, 176, 77, 0.24);
$as-shadow-blue-100: 0px 4px 6px rgba(0, 122, 255, 0.24);
$as-shadow-red-100: 0px 4px 6px rgba(244, 54, 54, 0.24);

Setelah warna sudah kita definiskan selanjutnya kita buat helpers untuk button di ../scss/helpers/button.scss.

Button Helpers

%btn-helper {
  -webkit-box-align: baseline;
  align-items: baseline;
  border: none;
  border-radius: 2rem;
  box-sizing: border-box;
  font-family: "NunitoSansSemibold", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  height: 3rem;
  letter-spacing: 0.02rem;
  line-height: normal;
  outline: none;
  padding: 0.75rem 2.5rem;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  white-space: nowrap;
}

.as-btn--xs {
  padding: 0.5rem 1rem;
}

.as-btn--sm {
  font-size: 0.875rem;
  height: 2.5rem;
  padding: 0.5rem 1.5rem;
}

.as-btn--md {
  padding: 0.75rem 3rem;
}

.as-btn--lg {
  font-size: 1.25rem;
  height: 3.5rem;
  padding: 0.75rem 4rem;
}

Button helpers sudah dibuat sesuai dengan kebutuhan kita baik dari segi ukuran, border, jenis font, dan lain sebagainya selanjutnya kita akan membuat varian button dari pilihan warna yang sudah kita definiskan sebelumnya menggunakan mixins scss di ../scss/mixins/button.scss

Button Mixins

$buttonType: (
  (primary $as-orange-100 $as-orange-200 $as-orange-300 $as-shadow-orange-100),
  (secondary $as-blue-100 $as-blue-200 $as-blue-300 $as-shadow-blue-100),
  (danger $as-red-100 $as-red-200 $as-red-300 $as-shadow-red-100)
);

.as-btn {
  @extend %btn-helper !optional;
}

@each $button in $buttonType {
  .as-btn--#{nth($button, 1)} {
    background: #{nth($button, 2)};
    border: 1px solid transparent;
    box-shadow: #{nth($button, 5)};
    color: $as-white;
    cursor: pointer;

    &:hover {
      background: #{nth($button, 3)};
    }

    &:focus,
    &:active,
    &.as-btn--active {
      background: #{nth($button, 4)};
      border: 1px solid $as-white;
    }
  }
}

Kita juga bisa menambahkan variasi yang lebih banyak lagi pada button sesuai kebutuhan. untuk sytaks code selengkapnya bisa di lihat disini.

Terimakasih!