zenigameMixin - Button

Overview

ボタンに関係するMixinは4つあります。

btn

ボタンスタイルを作成するための基本的なスタイルを追加します。

@include btn(height, padding);

引数

注意

ボタンスタイルを作成するには、 btn-varientとtypoを合わせて追加する必要があります。

例

.btn {
  @include btn(18px);
  @include btn-varient(#fff, $gray200, $gray100, $gray200);
  @include typo($base-font-size - 2px, $gray700, 300, 18px);
}

btn-varient

ボタンの背景、枠線、影の色を指定します。

@include btn-varient(background-color, border-color, background-hover-color, background-active-color);

引数

btn-gradient

ボタンの背景色をグラデーションで指定します。ボタンのグラデーションは縦（上から下）のみ行えます。
btn-varientで基本となる色指定をした後にグラデーションの指定をしてください。

@include btn-gradient(start-color, end-color);

引数

####例

Ex Button

.btn._ex {
  @include btn-varient($blue500, $blue700, $blue700, $blue800);
  @include btn-gradient($blue500, $blue700);
  color: #fff;
}

##btn-resize ボタンサイズを変更します。

@include btn-resize(height, font-size, padding);

引数

####例

Ex Button

.btn._exlg {
  @include btn-resize(50px, 20px);
}