MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選

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

公開日:2018年03月02日
最終更新日:2018年03月02日
オンスタ運営
マークアップ
Webデザイン
ホーム > 全記事一覧 > 制作 > エンジニア > プログラミング > コピペ実装!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
このエントリーをはてなブックマークに追加
コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

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

 

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

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

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

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

シンプル系リンクボタン

アイコン付き

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

 

 

じわっと背景色が変わる

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

 

 

デニム風ステッチ

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

立体系リンクボタン

押し込みデザイン

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

 

 

エンボス風

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

 

 

グラデーション

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

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

 

 

ホバーアクション

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

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

 

 

斜めに開いて背景色変更

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

 

 

ボーダーアクション

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

 

 

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

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

 

 

動くグラデーション

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

 

 

メッセージを表示させる

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

 

 

 

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

 

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

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

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


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

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
マークアップ
デザイン
公開日: 2018年03月30日
最終更新日: 2022年01月17日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
「HTML5プロフェッショナル認定試験」合格に向けての勉強方法〜資格取得を目標にして知識を深めよう〜
プログラミング
マークアップ
公開日: 2017年10月20日
最終更新日: 2017年10月20日
「HTML5プロフェッショナル認定試験」合格に向けての勉強方法〜資格取得を目標にして知識を深めよう〜
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
グリットデザインを使いこなそう!
デザイン
Webデザイン
公開日: 2018年08月10日
最終更新日: 2022年01月17日
グリットデザインを使いこなそう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
「アイデアの参考に!」現役デザイナーが選ぶ【参考サイト】7選
デザイン
Webデザイン
公開日: 2018年04月18日
最終更新日: 2018年04月18日
「アイデアの参考に!」現役デザイナーが選ぶ【参考サイト】7選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
コピペ実装!CSSだけでフォームのUI改善**サンプルコード7選
テクノロジー
マークアップ
デザイン
公開日: 2021年04月22日
最終更新日: 2021年04月22日
コピペ実装!CSSだけでフォームのUI改善**サンプルコード7選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【初心者向け】Adobe XDでオープニングアニメーションを作ってみよう!
デザイン
Webデザイン
公開日: 2021年07月21日
最終更新日: 2021年07月21日
【初心者向け】Adobe XDでオープニングアニメーションを作ってみよう!
h.onishi

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【 Illustrator CC 】でWebデザインをする時に気をつけたいルール8選
デザイン
Webデザイン
公開日: 2016年12月27日
最終更新日: 2016年12月27日
【 Illustrator CC 】でWebデザインをする時に気をつけたいルール8選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
IT系勉強会に参加して輪を広げよう!
テクノロジー
マーケティング
プログラミング
Webデザイン
公開日: 2017年11月08日
最終更新日: 2017年11月08日
IT系勉強会に参加して輪を広げよう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【CSS】CSSレイアウト組まとめ(中編)
テクノロジー
マークアップ
公開日: 2017年10月06日
最終更新日: 2017年10月06日
【CSS】CSSレイアウト組まとめ(中編)
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
新年早々スマホコーディングの「html/css」についてもう一度おさらいしてみる。
マークアップ
公開日: 2017年01月18日
最終更新日: 2017年01月18日
新年早々スマホコーディングの「html/css」についてもう一度おさらいしてみる。
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。