【CSS】ボタンのデザイン10選：丸ごとコピペ超簡単！！

Programming
2020.03.22

この記事では、HTMLとCSSだけで色々な用途で使用可能なボタンのデザインをいくつか紹介します。ブログやHPでお問い合わせボタンや詳細ボタンなどのCTAに使って下さい。

HTMLとCSSをコピペするだけで反映されます。コピペした後に自分なりに編集してオリジナルのデザインにしてみて下さい。

使い方

  1. HTMLをbodyの好きな箇所にコピペ
  2. CSSをスタイルシートにコピペ
注意点

一つ一つに個別でclassを付けてHTMLに記述しています。基本的に被らなそうなクラス名にしていますが、classが重複してしまうとスタイルが崩れる場合があるのでご注意下さい。その場合はclass=”この部分“を任意のものにすれば解決します。

CSSの基本的な書き方は以下。

【初心者必見】CSSの基礎的な書き方
この記事では、プログラミング初心者の方に向けて約1分間ですぐに理解できる『CSS』び基本的な書き方をご説明いたします。
kt-life.net
2019.12.30

基本的なボタンデザイン

まずは簡単な基本的なボタンのデザインの紹介です。

下記が基本的なボタンの作り方とデザインです。以下省略。

ボタン

下記のHTMLをbody内に、CSSをスタイルシートにコピペして下さい。以下省略

HTML

<a href="#" class="btn1">ボタン</a>

CSS

.btn1 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #f4b364; /*色*/
  border: solid 2px #f4b364; /*ボーダー*/
  border-radius: 3px;
  transition: .4s;
}
.btn1:hover {
  background: #f4b364; /*マウスホバー時の背景*/
  color: white; /*マウスホバー時のテキスト色*/
}

色反転バージョンです。

ボタン

HTML

<a class="btn2">ボタン</a>

CSS

.btn2 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: #f4b364;
  color: white;
  border: solid 2px #f4b364;
  border-radius: 3px;
  transition: .4s;
}
.btn2:hover {
  background: white;
  color: #f4b364;
}

グラデーションデザイン

色反転

マウスホバーでグラデーションの位置が反転します。

ボタン

HTML

<a href="#" class="btn3">ボタン</a>

CSS

.btn3 {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 3px;
  font-weight: bold;
  color: #FFF;
  background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);;
  transition: .4s;
}
.btn3:hover {
  background-image: linear-gradient( 135deg, #9708CC 10%, #43CBFF 100%);;
}

SNS風

某SNSサイトのロゴ風

Follow Me

HTML

<a  href="#" class="btnsns">
  <i class="fab fa-instagram"></i><span>Follow Me</span>
</a>

CSS

.btnsns {
  color: #FFF;
  border-radius: 7px;
  position: relative;
  display: inline-block;
  height: 50px;
  width: 190px;
  text-align: center;
  font-size: 25px;
  line-height: 50px;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden;
  text-decoration:none;
}
.btnsns:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}
.btnsns .fab fa-instagram {
  font-size: 35px;
  position: relative;
  top: 4px;
}
.btnsns span {
  /*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s
}
.btnsns:hover {
  background: linear-gradient(135deg, #f13f79 0%, #427eff 70%);
}

立体的なデザイン

四角い良くあるボタン

　クリックすると本当のボタンの様に凹みます。

ボタン1

HTML

<a href="#" class="btn4">ボタン1</a>

CSS

.btn4 {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #ddd;/*ボタン色*/
  color: #111;
  border-bottom: solid 4px #999; /*下にある影の色*/
  border-radius: 3px;　/*角を丸く」*/
}
.btn4:active {
  /*ボタンを押したときの動き*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

良くある丸いボタン

クリックすると本当のボタンの様に凹みます。

ボタン

HTML

<a class="btn5">ボタン</a>

CSS

.btn5 {
  display: inline-block;
  text-decoration: none;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 25px;
  color: #777!important;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: solid 2px #b5b5b5;
}
.btn5:active {
  /*押したとき*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: none;
}

アニメーション

ズーム

マウスを乗っけるとズームします。

ボタン

HTML

<a href="#" class="btn6">ボタン</a>

CSS

.btn6 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: #A2AAB1;
  color: white;
  border: solid 2px #A2AAB1; /*ボーダー*/
  border-radius: 3px;
  -webkit-transition: transform .1s ease-in-out;
  -webkit-transition: -webkit-transform .1s ease-in-out;
  transition: -webkit-transform .1s ease-in-out;
  transition: transform .1s ease-in-out;
  transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out;
}
.btn6:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

アップ

ホバーで上に動く。

ボタン

HTML

<a href="#" class="btn7">ボタン</a>

CSS

.btn7 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: #A2AAB1;
  color: white!important;
  border: solid 2px #A2AAB1; /*ボーダー*/
  border-radius: 3px;
  -webkit-transition: transform .1s ease-in-out;
  -webkit-transition: -webkit-transform .1s ease-in-out;
  transition: -webkit-transform .1s ease-in-out;
  transition: transform .1s ease-in-out;
  transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out;
}
.btn7:hover {
    -webkit-transform: translateY(-0.2em);
    transform: translateY(-0.2em);
}

テカり

キラリとテカリ感をアニメーションで演出。

ボタン

HTML

<a href="#" class="btn8">ボタン</a>

CSS

.btn8 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: #A2AAB1;
  color: white;
  border: solid 2px #A2AAB1; /*ボーダー*/
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.btn8:before {
    content: "";
    background-color: #fff;
    height: 100%;
    width: 3em;
    display: block;
    position: absolute;
    top: 0;
    -webkit-transform: skewX(-45deg) translateX(0);
    transform: skewX(-45deg) translateX(0);
    -webkit-transition: none;
    transition: none;
    opacity: 0;
    -webkit-animation: left-slide 2s infinite;
    animation: left-slide 2s infinite;
}
@-webkit-keyframes left-slide {
    0% {
        left: -50%;
        opacity: 0.1;
    }
    50%,
    100% {
        left: 150%;
        opacity: 0.75;
    }
}
@keyframes left-slide {
    0% {
        left: -50%;
        opacity: 0.1;
    }
    50%,
    100% {
        left: 150%;
        opacity: 0.75;
    }
}

ウェーブ

ボタンが振動してます。

ボタン

HTML

<a href="#" class="btn9">ボタン</a>

CSS

.btn9 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: #A2AAB1;
  color: white;
  border: solid 2px #A2AAB1; /*ボーダー*/
  border-radius: 3px;
  position: relative;
  z-index: 1;
}
.btn9:before {
    content: "";
    display: block;
    background-color: inherit;
    border-radius: inherit;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.75;
    -webkit-animation: waves 1s infinite;
    animation: waves 1s infinite;
}
@-webkit-keyframes waves {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        opacity: 0;
    }
}
@keyframes waves {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 0;
    }
}

チカチカ

テキストがチカチカしてます。

ボタン

HTML

<a href="#" class="btn10">ボタン</a>

CSS

.btn10 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: #A2AAB1;
  color: white;
  border: solid 2px #A2AAB1; /*ボーダー*/
  border-radius: 3px;
  -webkit-animation: glow 2s infinite;
  animation: glow 2s infinite;
}
@-webkit-keyframes glow {
    from,
    to {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    25% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    27% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 0), 0 0 0.1em rgba(255, 255, 255, 0), 0 0 1em rgba(255, 255, 255, 0), 0 0 2em rgba(255, 255, 255, 0);
    }
    29% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    31% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 0.5), 0 0 0.1em rgba(255, 255, 255, 0.25), 0 0 1em rgba(255, 255, 255, 0), 0 0 2em rgba(255, 255, 255, 0);
    }
    33% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    66% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    68% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 0.5), 0 0 0.1em rgba(255, 255, 255, 0), 0 0 1em rgba(255, 255, 255, 0), 0 0 2em rgba(255, 255, 255, 0);
    }
    70% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
}
@keyframes glow {
    from,
    to {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    25% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    27% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 0), 0 0 0.1em rgba(255, 255, 255, 0), 0 0 1em rgba(255, 255, 255, 0), 0 0 2em rgba(255, 255, 255, 0);
    }
    29% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    31% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 0.5), 0 0 0.1em rgba(255, 255, 255, 0.25), 0 0 1em rgba(255, 255, 255, 0), 0 0 2em rgba(255, 255, 255, 0);
    }
    33% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    66% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    68% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 0.5), 0 0 0.1em rgba(255, 255, 255, 0), 0 0 1em rgba(255, 255, 255, 0), 0 0 2em rgba(255, 255, 255, 0);
    }
    70% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
}

以上が「【CSS】ボタンのデザイン10選：丸ごとコピペなので初心者も簡単」

今後も様々なデザインを追加していく予定です。是非参考にしてみて下さい。

デザイン見本まとめ

他のデザイン見本もいくつか用意しています。合わせてどうぞ。

CSSでグラデーションを作成する方法【コピペで使える】
今回は、CSSでグラデーションを作成する方法をいくつか紹介します。CSSのプロパティとカラーコードの指定の仕方や値に関してを詳しく書いていきます。また最後にはコピペ用の見本デザインも用意していますので良かったら参考にして下さい。
kt-life.net
2020.03.17
コピペで出来る見出しデザイン15選：CSSをそのまま使用可能
この記事では、HTMLとCSSだけで色々な用途で使用可能な見出し（h1,h2など）のデザインをいくつか紹介します。ブログやHPで使って下さい。
kt-life.net
2020.02.16
【コピペでOK】汎用性抜群なボックスレイアウトデザイン25選!!
この記事は、HTMLとCSSだけでボックス（div）の色々な用途で使用可能なレイアウトのコーティングデザインをいくつか紹介いたします。ブログやHPで要点などをまとめる時にでも使って下さい。
kt-life.net
2020.05.02
【コピペOK】お洒落な引用デザイン10選！！
今回はblockquoteを使った引用のデザインをおしゃれに表現したCSSデザインを10選紹介します。
kt-life.net
2020.09.09
【コピペ可】ワードプレスの表(テーブル)デザイン5選！！
この記事では、HTMLとCSSだけで色々な用途で使用可能な表（table）のおしゃれなコーティングデザインをいくつか紹介します。ブログやHPで一覧表や料金表などをまとめる時にでも使って下さい。
kt-life.net
2020.03.01
【コピペ可】おしゃれなリスト(箇条書き)デザイン30選！！ファイルあり
この記事は、HTMLとCSSだけで箇条書きリスト（ul、ol、li）の色々な用途で使用可能なおしゃれなコーティングデザインをいくつか紹介いたします。ブログやHPで要点などをまとめる時にでも使って下さい。初心者の方でもあまり難しく考えないで済む様にHTML内にスタイルを記述しているので全て丸々コピペでOKです。
kt-life.net
2020.02.11
【CSS】ボタンのデザイン10選：丸ごとコピペ超簡単！！
この記事では、HTMLとCSSだけで色々な用途で使用可能なボタンのデザインをいくつか紹介します。ブログやHPでお問い合わせボタンや詳細ボタンなどのCTAに使って下さい。
kt-life.net
2020.03.22
【コピペOK】CSSで画像をおしゃれに！全6パターン！!
この記事では、CSSで画像に様々のスタイルを付けて、いくつかおしゃれなデザインを紹介します。画像を目立たせたい場合や他の画像とデザインで差別化する際などに使ってみて下さい。
kt-life.net
2020.07.08
この記事を書いた人
KEITO
KEITO

AI × IT × WEB3｜関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
CSSHTMLReference
この記事を共有する
スポンサーリンク
スポンサーリンク
KEITO
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1！屈強なサーバー/信頼性抜群！トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker：0%〜0.1%
Taker：0.02%〜0.1%
先物取引手数料Maker：0%〜0.01%
Taker：0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
Bybitで取引する
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss：15種以上
CRYPTOS：15種以上
レバレッジ最大1111倍
スポット手数料Maker：0.02%〜0.18%
Taker：0.05〜0.20%
先物取引手数料ー
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOSで取引する
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジー
スポット手数料Maker：0.04%〜0.20%
Taker：0.03%〜0.20%
先物取引手数料ー
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コードー
レビュー記事レビュー記事は こちら
Nexoで取引する

他おすすめ取引所はこちら

タイトルとURLをコピーしました