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