基礎編

ボタン1

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

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

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

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

ボタン

ボタンのパターンが多いため、2回に分けて紹介いたします。

おさえておきたいところ

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

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

背景が流れる

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.

次回の予定

引き続きボタンを作ってみようと思います\\\\٩( ‘ω’ )و ////
合わせて読みたい
ボタン2
ボタン2
ABOUT ME
WEBさん
WEBさん
WordPressの不具合をなおす人
あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか? WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。
記事URLをコピーしました