ボタン1

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。
その中でも特に勉強になったコードを紹介します。
コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。
あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください!
ボタン
ボタンのパターンが多いため、2回に分けて紹介いたします。
おさえておきたいところ
ボタンを使う目的と使いどころはこんな感じです。
- 目的:ユーザーにアクションを起こさせる
- 使いどころ:マウスオーバー / クリック
背景が流れる
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」内のボタンにカーソルをあわせて動きを確かめてね!↑
次回の予定
引き続きボタンを作ってみようと思います\\\\٩( ‘ω’ )و ////