【mixin】色相を変えてグラデーションを鮮やかにしたボタンを作るmixin

色相を変えてグラデーションを鮮やかにしたボタンを作って、マテリアルデザインに合うようなelevation(高度)を設定したものを作るmixinです。

色相を変えてグラデーションを鮮やかにしたボタンを作って、マテリアルデザインに合うようなelevation(高度)を設定したものを作るmixinです。

参考: Webサイトを使いやすく!UIデザインのCSS小技テクニック21個まとめ(実例サンプルコード付)(PhotoshopVIP)

参考サイトにはいろいろな小技が載っているので、とても勉強になります。

色相を変えたグラデーションのmixinを作る

一つのmixinの中に入れてしまってもかまわないとは思うのですが、コレはコレで別の使い道がありそうなので、違うmixinとして作りました。

SASSの関数の一つ、adjust-hue()を使って$colorで入れた色の色相を-30度(初期値)ずらすようにしています。TOP(色相を変えた色)→BOTTOM(元の色)のようにグラデーションします。

色相を変えたグラデーションのmixinを利用したボタンを作る

先に作ったmixinを組み込んだmixinを作成します。

マテリアルデザインガイドによれば、Raised Buttonの初期elevationは2、Press状態で8になっているので、それに合わせてbox-shadowの影の広がりを調整しました。また、ホバーやフォーカス、アクティブ状態のときと元の状態に戻るときのアニメーションの速さ(transition)も変えてあります。ホバー時はふんわり、元の状態に戻るときは速くという感じです。

実際にHTMLとSCSSに設定する

実際に使ったHTMLは

SCSSに使うときは

色はお好みで入れて。
このSCSSをコンパイルしてできるCSSは下です。プレフィックスがいっぱいです。

実行結果は

となります。

赤っぽい色を使うとこんな感じ。