ボタン１

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」内のボタンにカーソルをあわせて動きを確かめてね！↑

次回の予定

引き続きボタンを作ってみようと思います＼＼\\٩( ‘ω’ )و //／／

WEBさん

WordPressの不具合をなおす人

TwitterInstagramYouTubeContact

あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？ WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。