元となるXDファイルとScssファイルは下記にアップしています。
各ボタンはコンポーネントになっていますのでコピペするなりアセットとして読み込むなり、ご自由にお使いください。
各ボタンのXDでの動きはこんな感じ。
ボタンのベースとなるScssは下記のソースです。
※ ボタンをaタグで作ったので、非活性状態はdisabledクラスを付与することで適用されるようにしています。
hoverで不透明度が薄くなります。
hoverで背景色が変わります。
hoverで塗りから線に変わります。
hoverで線から塗りに変わります。
hoverで左から背景色が変わります。
hoverで上から背景色が変わります。
hoverで左右から背景色が変わります。
hoverで上下から背景色が変わります。
hoverで左右に背景色が変わります。
hoverで上下に背景色が変わります。
hoverで文字間を拡げます。
XDのコンポーネントとステートの勉強がてらに作ってみました。
また他のボタンやよく使うオブジェクトも追加していきます。（たぶん