コピペ実装！CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは、ざきやまです！

通常時、ホバー時、アクティブ時と様々な変化をつけることができるリンクボタン！CSS3で手軽にアニメーションが表現できるようになった今、こだわりのボタンデザインが多く見られるようになりましたね〜。

GrowGroupが制作するWEBサイトも、ボタンのホバーアクションまで丁寧にデザイナーがデザインしています！

今回のブログでは、「癖がなくて使いやすい」「お洒落」なボタンのサンプルコードをご紹介します♪もちろんそのままコピペして使っていただけます！

追記（2020.08.07）
第2弾を公開しました！少し変わったボタンを使いたい方は第2弾もご覧ください！
【第2弾】コピペ実装！CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード7選

シンプル系リンクボタン

アイコン付き

シンプルで使いやすいアイコン付きリンクボタンです。
長文がきて２行になってしまった場合に崩れてしまわないよう考慮したCSSです。

じわっと背景色が変わる

リンクボタンのホバー時に背景色を変えるのはよくある方法ですが、じわっとゆっくり背景色を変えることで柔らかい印象に仕上げることができます。

デニム風ステッチ

枠線（border）の外にさらに領域を広げるって、実は一工夫が必要なのです。
このようなデザインの場合、box-shadowをぼかしなしで設定することで同様の見た目をつくることができます！

立体系リンクボタン

押し込みデザイン

ホバーだけではなく、クリック時にアクションをつけることもできます。これを利用してクリックしたときに本当に押したようにみせることができます！

エンボス風

リンクボタンのテキストを背景色より暗めにし、text-shadowで白の影をつけてあげると、エンボス加工のような仕上がりになります。

グラデーション

立体的に見せるための定番ですが！グラデーションです。CSSの場合、グラデーションジェネレーターなどを使って実装してしまうと楽チンです♪

グラデーションジェネレーター→http://www.colorzilla.com/gradient-editor/

ホバーアクション

左右に広がって背景色変更

背景色が変わるときに動きがあると、シンプルながらにこだわりを感じられますね！上下や真ん中バージョンをいろいろとパターンはありますが、ここでは左右に広がるサンプルコードをご紹介します。

斜めに開いて背景色変更

上のものと似ていますが、こちらのほうが少しクールなイメージに。どのぐらいひらかせるか調整することで印象を変えることができます。

ボーダーアクション

枠線が交差して色が変わるアクションです。黒背景などのかっこいいWEBデザインにオススメです！

ふわっと光を放つ（背景色濃いめの時にオススメ）

こちらも暗めや濃いめの背景のデザインにオススメです。ふわっと一瞬光をはなってうっすらと輝いているように見えますね。

動くグラデーション

ホバーするとグラデーションを左から右になめらかに動かすアクションです。

メッセージを表示させる

このボタンを押すと何がおこるのか？メッセージを表示すると、親切ですね。
例えば、問い合わせボタンを押すといきなりメーラーが開くときなど、たまにびっくりしてしまいますよね。そんなときに下のサンプルコードのようにメーラーが立ち上がることをメッセージ表示したり！いろいろと使える場面があるのではないでしょうか！

このようにCSSだけで実装できるリンクボタンは、工夫次第で無限の可能性がありますね！
ぜひぜひ、あなたのWEBサイトに取り入れてもらえるとざきやまは泣いて喜びます！

それではまた次の機会に！

また、更なるスキルアップにつなげたい方は下記のUdemyなどを参考にしてみるものいかがでしょうか。

フロントエンドエンジニアになりたい人の Webプログラミング入門