【CSS】ボタンデザイン14選｜WordPressにコピペOK【ホバー/ダークモード対応も】

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

ブログを書いていると「ここにボタンを置きたいな」という場面って、けっこうありますよね。でも毎回CSSを一から書くのは正直めんどうです。

そこで今回は、自分がよく使うボタンのデザインを14選、コピペで使える形でまとめてみました。マウスを乗せたときに動くものも入れているので、気に入ったもののコードをコピーして使ってみてください。

目次表示

使い方（コードの貼り方）
まずは基本のボタン 4種
マウスを乗せると動くボタン 6種
押した感じが気持ちいいボタン 2種
実際によく使うボタン 2種
スマホで見やすくするコツ
ダークモードに対応させる方法
WordPressのボタンに使うには
まとめ

目次へ

使い方（コードの貼り方）

各ボタンは HTML と CSS のセットで載せています。

HTML … 記事の本文に「カスタムHTML」ブロックを作って貼り付け
CSS … ［外観］→［カスタマイズ］→［追加CSS］に貼り付け

まずは基本のボタン 4種

土台になる4つです。ほとんどの場面はこの中でまかなえます。迷ったら一番上のシンプルなボタンでOKです。

① シンプルなボタン

<button class="btn-solid">送信する</button>

.btn-solid{
  padding:.85em 2em;
  color:#fff;
  background:#37a845;
  border:none;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s;
}
.btn-solid:hover{ background:#2c8639; }

迷ったらこれでOKの定番です。

② 枠線だけのボタン

<button class="btn-outline">詳しく見る</button>

.btn-outline{
  padding:.8em 2em;
  color:#37a845;
  background:transparent;
  border:2px solid #37a845;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}
.btn-outline:hover{ background:#37a845; color:#fff; }

主役ではないサブのリンクに向いています。

③ 角を丸くしたボタン

<button class="btn-round">無料で始める</button>

.btn-round{
  padding:.8em 2.2em;
  color:#fff;
  background:#ee6f8b;
  border:none;
  border-radius:999px;   /* これで左右がまん丸に */
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(238,111,139,.4);
  transition:.2s;
}
.btn-round:hover{
  background:#e2547a;
  box-shadow:0 6px 18px rgba(238,111,139,.5);
}

丸くするだけで、やわらかい印象になります。申し込みボタンなどに。

④ グラデーションのボタン

<button class="btn-grad">今すぐ登録</button>

.btn-grad{
  padding:.85em 2.2em;
  color:#fff;
  border:none;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  background:linear-gradient(135deg,#37a845,#46b0f0);
  background-size:180% 180%;
  transition:.4s;
}
.btn-grad:hover{ background-position:100% 50%; }

マウスを乗せると色がゆっくり動きます。

マウスを乗せると動くボタン 6種

この記事のメインです。マウスを乗せたときの「ちょっとした動き」があるだけで、ぐっと押したくなるボタンになります。ほとんど transition だけで作れます。

⑤ 色がスッと広がるボタン

<button class="btn-fill">お問い合わせ</button>

.btn-fill{
  position:relative; overflow:hidden; z-index:0;
  padding:.8em 2em;
  color:#37a845;
  background:transparent;
  border:2px solid #37a845;
  border-radius:10px;
  font-weight:600; cursor:pointer;
  transition:color .3s;
}
.btn-fill::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:#37a845;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.btn-fill:hover{ color:#fff; }
.btn-fill:hover::before{ transform:scaleX(1); }

左から色がスッと伸びてきます。この記事で一番人気の動きです。

⑥ 下線がスッと伸びるボタン

<button class="btn-line">記事一覧を見る</button>

.btn-line{
  padding:.5em .2em;
  color:#37a845;
  background:none; 
  border:none;
  font-weight:600; 
  cursor:pointer;
  position:relative;
}
.btn-line::after{
  content:""; 
  position:absolute; 
  left:0; bottom:0;
  width:100%; 
  height:2px; 
  background:#37a845;
  transform:scaleX(0); 
  transform-origin:right;
  transition:transform .3s;
}
.btn-line:hover::after{
  transform:scaleX(1); 
  transform-origin:left;
}

さりげない動きなので、文章の中のリンクに向いています。

⑦ ふわっと浮くボタン

<button class="btn-float">ダウンロード</button>

.btn-float{
  padding:.85em 2em;
  color:#fff;
  background:#37a845;
  border:none; 
  border-radius:10px;
  font-weight:600; 
  cursor:pointer;
  box-shadow:0 6px 16px rgba(55,168,69,.3);
  transition:.25s;
}
.btn-float:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(55,168,69,.42);
}

影と一緒に持ち上がって、立体感が出ます。

⑧ キラッと光るボタン

<button class="btn-shine">プレミアム登録</button>

.btn-shine{
  position:relative; 
  overflow:hidden;
  padding:.85em 2.2em;
  color:#fff; 
  background:#37a845;
  border:none; 
  border-radius:10px;
  font-weight:600; 
  cursor:pointer;
}
.btn-shine::after{
  content:""; 
  position:absolute; 
  top:0; 
  left:-120%;
  width:55%; 
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg);
  transition:left .6s;
}
.btn-shine:hover::after{ left:150%; }

光が斜めに走って、ちょっと特別な感じが出せます。

⑨ 矢印が動くボタン

<button class="btn-arrow">次へ進む<span class="arw">→</span></button>

.btn-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.85em 2em;
  color:#fff; 
  background:#37a845;
  border:none; 
  border-radius:10px;
  font-weight:600; 
  cursor:pointer;
}
.btn-arrow .arw{
  display:inline-block;
  transition:transform .25s;
}
.btn-arrow:hover .arw{ transform:translateX(6px); }

「読み進めてね」の合図として使えます。

⑩ クリックで波紋が広がるボタン（少しだけJavaScriptを使います）

<button class="btn-wave">クリックしてみて</button>

.btn-wave{
  position:relative; 
  overflow:hidden;
  padding:.85em 2.2em;
  color:#fff;
  background:#7b6ef6;
  border:none; 
  border-radius:10px;
  font-weight:600; 
  cursor:pointer;
}
.wave-el{
  position:absolute; 
  border-radius:50%;
  transform:scale(0);
  background:rgba(255,255,255,.5);
  animation:wave .6s linear;
  pointer-events:none;
}
@keyframes wave{ to{ transform:scale(4); opacity:0; } }

<script>
document.querySelector('.btn-wave').addEventListener('click',function(e){
  const c=document.createElement('span');
  const d=Math.max(this.clientWidth,this.clientHeight);
  const r=this.getBoundingClientRect();
  c.className='wave-el';
  c.style.width=c.style.height=d+'px';
  c.style.left=(e.clientX-r.left-d/2)+'px';
  c.style.top=(e.clientY-r.top-d/2)+'px';
  this.appendChild(c);
  setTimeout(()=>c.remove(),600);
});
</script>

押した場所から波がふわっと広がる、スマホアプリでよく見る動きです。

押した感じが気持ちいいボタン 2種

クリックした瞬間の手ごたえを作るタイプです。:active（押している間）の指定がポイントになります。

⑪ 押すと沈む立体ボタン

<button class="btn-push">ポチッと</button>

.btn-push{
  padding:.85em 2em;
  color:#fff; 
  background:#ee6f8b;
  border:none; 
  border-radius:10px;
  font-weight:600; 
  cursor:pointer;
  box-shadow:0 6px 0 #c23e60;   /* 下の影で厚みを表現 */
  transition:.08s;
}
.btn-push:active{
  transform:translateY(4px);
  box-shadow:0 2px 0 #c23e60;
}

本当に押し込んだような手ごたえが出ます。

⑫ ぷっくりしたボタン

<button class="btn-puku">やわらかボタン</button>

/* ★背景が同系色じゃないと立体に見えません（例:親を#eaeee7に） */
.btn-puku{
  padding:.9em 2.2em;
  color:#5a6a56; 
  background:#eaeee7;
  border:none; 
  border-radius:16px;
  font-weight:600; 
  cursor:pointer;
  box-shadow:6px 6px 12px #cbd2c6,-6px -6px 12px #fff;
  transition:.15s;
}
.btn-puku:active{
  box-shadow:inset 5px 5px 10px #cbd2c6,inset -5px -5px 10px #fff;
}

背景と同じ色の中に置くと、やわらかい質感になります。

実際によく使うボタン 2種

アイコン付きと、押してほしいときに目立たせる揺れるボタンです。ブログだと出番が多い2つだと思います。

⑬ アイコン付きボタン

<button class="btn-ico">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
    <polyline points="7 10 12 15 17 10"/>
    <line x1="12" y1="15" x2="12" y2="3"/>
  </svg>
  資料をダウンロード
</button>

.btn-ico{
  display:inline-flex; 
  align-items:center; 
  gap:.6em;
  padding:.8em 1.8em;
  color:#fff; 
  background:#37a845;
  border:none; 
  border-radius:10px;
  font-weight:600; 
  cursor:pointer;
  transition:background .2s;
}
.btn-ico:hover{ background:#2c8639; }
.btn-ico svg{ width:18px; height:18px; }

アイコンがあると、ひと目で何のボタンか伝わります。SVGのアイコンは文字色を引き継ぐので、色替えもラクです。

⑭ ぽよんと揺れて目立つボタン

<button class="btn-bounce">クリックはこちら</button>

.btn-bounce{
  padding:.9em 2.4em;
  color:#fff; 
  background:#ff8a3d;
  border:none; 
  border-radius:999px;
  font-weight:700; 
  cursor:pointer;
  box-shadow:0 6px 16px rgba(255,138,61,.4);
  animation:bounce 1.4s ease-in-out infinite;
}
@keyframes bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
.btn-bounce:hover{ animation-play-state:paused; }

ずっとゆっくり揺れて、自然と目に入ります。押してほしいボタンを1つだけ目立たせたいときに。

揺れ方は 1.4s（速さ）と translateY(-6px)（揺れ幅）で調整できます。「動きを減らす」設定の端末では自動で止まるようにしてあります（設定用CSSの prefers-reduced-motion の部分）。

スマホで見やすくするコツ

スマホでの「押しやすさ」は、次の3つだけ押さえれば大丈夫です。指でタップする範囲は、最低でも44px四方あると押し間違いが減ります。

タップ範囲は最低44px … padding を em で書いておくと、文字サイズに合わせて自然に広がります。
文字は16px以上 … iPhoneは16pxより小さいと、タップした時に画面が勝手に拡大することがあります。
スマホだけ横幅いっぱいにするのもアリ … 指で押しやすくなります。

/* スマホでは横幅いっぱい＋少し縦長に */
@media (max-width:600px){
  .btn-solid{
    display:block;
    width:100%;
    padding:1em;      /* タップ範囲を厚めに */
    font-size:1rem;   /* 16px。これより小さいと拡大の原因に */
  }
}

ダークモードに対応させる方法

コツは、色をコードに直接書かずに 変数（CSS変数） にまとめておくことです。あとは端末がダークモードのときだけ変数を上書きすれば、自動で色が切り替わります。

<button class="btn-adaptive">自動で色が変わる</button>

:root{
  --btn-bg:#ffffff;
  --btn-fg:#028a00;
  --btn-line:#e6ece3;
}
/* 端末がダークモードのときだけ、色を上書き */
@media (prefers-color-scheme:dark){
  :root{
    --btn-bg:#20241f;
    --btn-fg:#7ed389;
    --btn-line:#2e332c;
  }
}
.btn-adaptive{
  padding:.85em 2em;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid var(--btn-line);
  border-radius:10px;
  font-weight:600; cursor:pointer;
  transition:.2s;
}
.btn-adaptive:hover{
  background:var(--btn-fg);
  color:#fff;
}

上のボタンは、お使いの端末をダークモードにすると色が変わります。

WordPressのボタンに使うには

「コピペしたのに反映されない…」の原因は、ほとんどが貼る場所です。

いちばんかんたん：追加CSS＋カスタムHTML

CSSは［外観］→［カスタマイズ］→［追加CSS］に貼り付け。ボタンのHTMLは、記事編集画面でブロックを追加して 「カスタムHTML」ブロック を選び、そこに貼り付ければ表示されます。

おすすめ：標準のボタンブロックに名前をつける

WordPress標準の「ボタン」ブロックを置いて、右側の設定の［高度な設定］→［追加CSSクラス］にクラス名（例 btn-fill）を入力します。HTMLを書かなくても、いつものボタンブロックにデザインを当てられます。このときは実際のクラスが .wp-block-button__link.btn-fill になるので、CSSを少しだけ書き換えます。

/* 「追加CSSクラス」に btn-fill を入れた場合 */
.wp-block-button__link.btn-fill{
  position:relative; overflow:hidden; z-index:0;
  color:#37a845;
  background:transparent;
  border:2px solid #37a845;
  transition:color .3s;
}
.wp-block-button__link.btn-fill::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:#37a845;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.wp-block-button__link.btn-fill:hover{ color:#fff; }
.wp-block-button__link.btn-fill:hover::before{ transform:scaleX(1); }

何度も使うボタンは「ブロックのプリセット」や「再利用ブロック」に登録しておくと、毎回コードを貼らずに呼び出せます。このあたりはまた別の記事で紹介しますね。

まとめ

今回は、コピペで使えるCSSのボタンデザインを14種類まとめてみました。

それではまとめます。

基本の4つ（シンプル・枠線だけ・角丸・グラデーション）を押さえれば、たいていの場面はまかなえます
マウスを乗せたときのちょっとした動き（ホバー）があるだけで、ぐっと押したくなるボタンになります
WordPressは「貼る場所」が大事で、CSSは追加CSSへ、HTMLはカスタムHTMLブロックへ、が基本です
スマホのタップしやすさやダークモードも、ほんの少しの工夫で対応できます

全部を使う必要はないので、自分のブログに合いそうなものを1〜2個えらんで、色（緑の部分）を変えて使ってみてください。それだけでも記事の印象がけっこう変わりますよ。

それではまたノシ