ボタン２
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
ボタン
前回に引き続きボタンのパターンを紹介いたします。
おさえておきたいところ
ボタンを使う目的と使いどころはこんな感じです。
目的：ユーザーにアクションを起こさせる
使いどころ：マウスオーバー / クリック
線から塗りに変化①
See the Pen 線から塗りに変化① by Web Navigator (@web-navigator) on CodePen.
線から塗りに変化②
See the Pen 線から塗りに変化② by Web Navigator (@web-navigator) on CodePen.
グラデーション変化
See the Pen グラデーション変化 by Web Navigator (@web-navigator) on CodePen.
線が伸びる
See the Pen 線が伸びる by Web Navigator (@web-navigator) on CodePen.
塗りから線に変わる
See the Pen 塗りから線に変わる by Web Navigator (@web-navigator) on CodePen.
角丸に変わる
See the Pen 角丸に変わる by Web Navigator (@web-navigator) on CodePen.
丸がボタンに変形する
See the Pen 丸がボタンに変形する by Web Navigator (@web-navigator) on CodePen.
表示するテキストが切り替わる
See the Pen 表示するテキストが切り替わる by Web Navigator (@web-navigator) on CodePen.
ボタン内の矢印が動く
See the Pen ボタン内の矢印が動く by Web Navigator (@web-navigator) on CodePen.
矢印が右に移動して背景がつく
See the Pen 矢印が右に移動して背景がつく by Web Navigator (@web-navigator) on CodePen.
矢印が縮む
See the Pen 矢印が縮む by Web Navigator (@web-navigator) on CodePen.
次回の予定
ユーザーの目的の情報に早くたどり着かせる 「検索」を作ってみようと思います＼＼\\٩( ‘ω’ )و //／／