コピペですぐ使える!ビジネスライクなCSSボタンデザイン30選

今回はコピペで作れるCSSボタンデザインをご紹介していきます。

私が現場において使用頻度の高いものを中心に掲載しています。
後半では遊び心のあるボタンデザインも掲載していますので、シーンに合わせて使い分けて頂ければと思います。

ホバーアクション(マウスを重ねた時の変化)も合わせて入れてますので、すぐにご使用頂けます。

※テーマや既存のCSSによっては見え方が多少異なる場合がありますのでその都度調整をお願いします。

シンプルなボタンデザイン

Button
最もベーシックな長方形タイプの白抜きバージョン。マウスオンでカラーが反転します。

HTML

CSS
Button
最もベーシックな長方形タイプのベタ塗りバージョン。マウスオンでカラーが反転します。

HTML

CSS
Button
角丸タイプの白抜きバージョン。マウスオンでカラーが反転します。

HTML

CSS
Button
角丸タイプのベタ塗りバージョン。マウスオンでカラーが反転します。

HTML

CSS

立体的なボタンデザイン

Button
暗い色の下線を付けるだけで立体的なボタンに。マウスオンで実際にボタンを押したようなアクションに。

HTML

CSS
Button
角丸タイプの立体的なボタン。マウスオンで実際にボタンを押したようなアクションに。

HTML

CSS
Button
シャドウを付けて浮いたように見せた角丸ボタン。マウスオンでカラーが反転します。

HTML

CSS
Button
浮き出し効果で立体的なボタンデザインに。マウスオンで明るく変化します。

HTML

CSS

グラデーションのボタンデザイン

Button
濃淡のグラデーション+シャドウで高級感を出したボタンデザインに。マウスオンで透過します。

HTML

CSS
Button
違う2色のグラデーション+シャドウでお洒落なボタンデザインに。マウスオンでグラデが左右反転します。

HTML

CSS
Button
モノトーンのグラデーション+シャドウによるリアルなボタンデザイン。マウスオンで透過します。

HTML

CSS

矢印やアイコンの付いたボタンデザイン

Button
左側に矢印の付いたボタンデザイン。マウスオンで少し明るい色に変化します。

HTML

CSS
Button
右側にスタイリッシュな矢印の付いたボタンデザイン。マウスオンで背景が色付きます。

HTML

CSS
Button
左側にFont Awesomeのアイコンを置いたボタンデザイン。

HTML

CSS

カジュアルなボタンデザイン

Button
斜線で囲ったカジュアルなボタンデザイン。マウスオンで実線に変化します。

HTML

CSS
Button
右側にスタイリッシュな矢印の付いたボタンデザイン。マウスオンで背景が色付きます。

HTML

CSS
Button
囲み線をずらしたボタンデザイン。マウスオンで線と背景が重なってカラーが反転します。

HTML

CSS
Button
太い囲み線+斜め後ろに影を入れたボタンデザイン。マウスオンで実際にボタンを押したようなアクションに。

HTML

CSS

動くボタンデザイン

Button
上下に跳ねるボタンデザイン。マウスオンでカラーが反転します。

HTML

CSS
Button
左右に揺れるボタンデザイン。マウスオンでカラーが反転します。

HTML

CSS
Button
シーソーのように中心を軸にゆらゆら揺れるボタンデザイン。マウスオンでカラーが反転します。

HTML

CSS
Button
ピコピコとボタンを押す動きを繰り返すボタンデザイン。マウスオンでカラーが反転します。

HTML

CSS

ホバーアクションが個性的なボタンデザイン

Button
マウスオンで左側から色が変わります。

HTML

CSS
Button
マウスオンで下側から円形状に色が変わります。

HTML

CSS
Button
マウスオンでグラデーションに変化します。

HTML

CSS
Button
マウスオンでシャドウがモワッと広がります。

HTML

CSS
Button
マウスオンでラインで囲いながらカラーが反転します。

HTML

CSS
Button
マウスオンで全体がグラデーションに変化します。

HTML

CSS
Button
マウスオンでキラリと光ります。

HTML

CSS

Thanks
Button
マウスオンでテキストと背景の表示が立体的に切り変わります。

HTML

CSS

まとめ

今回も様々なサイトで使い回しができるように、なるべくシンプルに仕上げました。
一見シンプルなボタンでもホバーアクションを工夫すればデザイン性もグッと上がりますね!
是非ご活用ください!

無料相談の流れ

1.お申込み

下記お申込フォームより、お気軽にご連絡ください。

2.日程調整

担当より日程のご連絡をいたします。

3.無料相談

30分程度の相談会を実施いたします。

4.商談

弊社サービスをご検討頂ける場合には、お見積もりやサービスのご案内をさせて頂きます。

無料相談 ご利用後の流れ

しつこい電話セールスなどは一切いたしません。逆に、弊社サービスをご検討頂ける場合には、お見積もりやサービス内の詳細についてご案内をさせて頂きます。

ただ、メルマガの登録だけお願いします。
このメルマガでは新サービスの案内やコラムの更新情報のご案内をしております。

メルマガの解除はいつでもできますので、そこだけご理解とご協力をお願いいします。

Web集客の無料相談

▼お申し込みはこちらから
Web集客の無料相談

Web集客の無料相談こちらをクリック

Webで売上を伸ばすためには、
「認知」「集客」「教育」「販売」
このステップが大事です。

しかし、Webで売上を伸ばせていないほとんどのケースは、この4つを正しく理解して運用出来ていません。

例えば、、、

  • あなたのお客様について適切な分析が出来ていない
  • マーケットを正しく分析が出来ていない
  • SNSやブログについて正しい知識が無い
  • Web集客の対策に必要な技術や時間がない
  • 売れる仕組みの確立が出来ていない

この内容は、我々のようなWeb集客の専門業者でも日々情報を集め、何度もテストを繰り返し失敗を重ねながら正解を探している工程です。
その工程を無くして、Webからの売上を伸ばす事が出来るでしょうか?

無理ですよね。

エクセレントでは、Webを利用して売上を伸ばす「認知」「集客」「教育」「販売」このステップについてしっかりとサポートさせて頂きます。

あなたの商品やサービスについて分析し、売上アップ出来るまで伴走型サポートにて対応させて頂きます。

そんな当社の売上アップのための伴走型サポートについてご興味がございましたら、お気軽にお電話・メール・LINEにてご連絡ください。

お問い合わせはこちら

Instagram運用によるWeb集客が得意な会社 株式会社エクセレント

下川宜子

下川宜子

デザイン業務を担当しています。10年以上の実務経験の中で様々なジャンルのサイト制作に携わりました。ユーザー目線を大切にしたランディングページ制作を得意としています。

関連記事

無料相談行っています!!お気軽にご利用ください。
最近の記事 おすすめ記事
  1. Instagram(インスタグラム)の魅力的なプロフィールの書き方を解説します

  2. Instagram(インスタグラム)まとめ記事 プロフィールについて

  3. Instagram(インスタグラム)とは?いまさら聞けないInstagramの基礎知識

  4. あなたのビジネスをインスタ集客×ブログ接客で売上を3倍にする方法

  5. インスタグラム(Instagram) まとめ記事 業種別 インスタグラム運用の参考になるアカウントを紹介します

  6. Instagramのショッピング機能(Shop Now)の審査が通らない原因や再審査方法を紹介します。

  7. Instagram(インスタグラム)インスタショップ-Shop Now-の設定方法 【2022年最新版】

  8. インスタグラム(Instagram) まとめ記事 ストーリーズ投稿動画とは? ストーリーズ投稿についての基礎知識を解説します

  9. インスタグラム(Instagram) まとめ記事 リール動画とは? リール動画についての基礎知識を解説します

  10. インスタグラムマーケティングとは?Instagram運用に向いている企業と向いていない企業

  1. Instagram(インスタ)のリールの音源を保存して活用する方法

  2. Instagramのリール動画やTicktockやYoutubeのショート動画にたくさんの会社が力を入れている理由

  3. Instagram(インスタグラム)で集客を始める時に知っておくべき集客のコツ12選

  4. 初心者が知っておくべき基本的なSEO対策とは?上位表示に必要なやり方・方法について解説します。

  5. 検索意図とは?SEO対策で重要な調べ方と考え方を解説します。

  6. ホームページが検索結果に表示されない時の原因と対処方法を徹底解説!

  7. 【2022年版】Web集客の種類とその方法を集客にお困りのあなたに分かりやすく解説します

  8. SEO対策の内製化を積極的に取組んでいる中小企業の多くは自社でするSEO対策に迷走している。

  9. 売れているホームぺージ = 集客型ホームぺージに共通しているぺージ構成の法則

  10. これを見れば完璧!Google Maps API 取得方法をご紹介します。

資料を無料ダウンロード

弊社の会社概要と、ご提供サービスのご紹介資料です。
ご覧いただき、お気軽にお問い合わせください。

TOP