ボタン２

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.

次回の予定

合わせて読みたい

検索窓

WEBさん

WordPressの不具合をなおす人

TwitterInstagramYouTubeContact

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