ボタン２

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

ボタン

前回に引き続きボタンのパターンを紹介いたします。

おさえておきたいところ

ボタンを使う目的と使いどころはこんな感じです。

       目的：ユーザーにアクションを起こさせる
使いどころ：マウスオーバー / クリック

線から塗りに変化①

線から塗りに変化②

グラデーション変化

線が伸びる

塗りから線に変わる

角丸に変わる

丸がボタンに変形する

表示するテキストが切り替わる

ボタン内の矢印が動く

矢印が右に移動して背景がつく

矢印が縮む

次回の予定

ユーザーの目的の情報に早くたどり着かせる 「検索」を作ってみようと思います＼＼\\٩( ‘ω’ )و //／／