CSSで作るボタンデザイン20選

CSSで作るボタンデザイン20選

ボタンデザインは、クリック率やコンバージョンに直結する重要なUI要素です。

この記事では、実務でそのまま使えるCSSボタンデザインを20パターン紹介します。すべてコピペOKです。

基本ボタンデザイン（まずはここから）

① シンプルボタン

HTML
<a href="https://altetool.com/" class="btn">シンプルボタン</a>
CSS
.btn {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background-color: #3498db;
  border-radius: 0.4em;
  padding: 0.5em 1em;
  transition: 0.5s;
}

基本となるボタン。まずはここから。

シンプルボタン

② ホバーで色変化

CSS
.btn-hover:hover {
  background: #2980b9;
}

最もシンプルなインタラクション。

ホバーで色変化

中級：デザイン性のあるボタン

③ ボーダーボタン

CSS
.btn-border {
  color: #3498db;
  border: 2px solid #3498db;
  background-color: transparent;
}

.btn-border:hover {
  color: #fff;
  background-color: #3498db;
}

シンプルで汎用性が高いデザイン。

ボーダーボタン

④ グラデーションボタン

CSS
.btn-gradient {
  color: #fff;
  background: linear-gradient(45deg, #3498db, #9b59b6);
}

モダンな印象を与えるボタン。

グラデーションボタン

⑤ シャドウボタン

CSS
.btn-shadow {
  color: #fff;
  background-color: #3498db;
  box-shadow: 0 4px 0 #2980b9;
}

.btn-shadow:active {
  transform: translateY(4px);
  box-shadow: none;
}

押した感覚を表現できます。

シャドウボタン

上級：アニメーションボタン

⑥ 光が流れるボタン

CSS
.btn-light {
  position: relative;
  overflow: hidden;
}

.btn-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.6),
    transparent
  );
  transition: 0.5s;
}

.btn-light:hover::before {
  left: 100%;
}

視線誘導に強いエフェクト。

光が流れるボタン

⑦ 伸びるボタン

CSS
.btn-grow {
  transition: transform 0.3s;
}

.btn-grow:hover {
  transform: scale(1.1);
}

シンプルながら効果的。

伸びるボタン

⑧ 下線スライドボタン

CSS
.btn-underline {
  position: relative;
  border-radius: 0;
}

.btn-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #2980b9;
  transition: 0.3s;
}

.btn-underline:hover::after {
  width: 100%;
}

テキストリンクにも応用可能。

下線スライドボタン

⑨ 波紋エフェクト

CSS
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
}

.btn-ripple:hover::after {
  transform: scale(2);
  opacity: 1;
  transition: 0.4s;
}

マテリアルデザイン風の表現。

波紋エフェクト

モダンUIボタン（トレンドデザイン）

⑩ 角丸フルボタン

CSS
.btn-round {
  color: #fff;
  background: #3498db;
  border-radius: 4em;
}

柔らかく親しみやすい印象を与えるボタンです。

角丸フルボタン

⑪ ゴーストボタン

CSS
.btn-ghost {
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
}

背景に溶け込むミニマルなデザイン。ヒーローセクションなどで活躍します。

ゴーストボタン

⑫ アイコン付きボタン

CSS
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

アイコンを組み合わせることで、視認性と理解しやすさが向上します。

アイコン付きボタン icon

⑬ グラデーションホバー

CSS
.btn-grad-hover {
  background: linear-gradient(45deg, #3498db, #9b59b6);
  color: #fff;
}

.btn-grad-hover:hover {
  filter: brightness(1.2);
}

シンプルに印象を変えたい場合に有効なテクニックです。

グラデーションホバー

⑭ 枠アニメーションボタン

CSS
.btn-border-anim {
  position: relative;
  color: #3498db;
  background-color: transparent;
}

.btn-border-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #3498db;
  transform: scaleX(0);
  transform-origin: left;
  transition: 0.3s;
}

.btn-border-anim:hover::before {
  transform: scaleX(1);
}

枠が伸びることで、視線を引きつける演出になります。

枠アニメーションボタン

⑮ ガラス風ボタン

CSS
.btn-glass {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  color: #fff;
}

トレンドのGlassmorphismデザインに最適です。

ガラス風ボタン

⑯ ネオンボタン

CSS
.btn-neon {
  color: #0ff;
  border: 1px solid #00ffff;
  background-color: transparent;
  text-shadow: 0 0 5px #00ffff;
}

近未来系やダークUIにマッチするデザインです。

ネオンボタン

⑰ スライド背景ボタン

CSS
.btn-slide {
  position: relative;
  color: #3498db;
  border: 2px solid #3498db;
  background-color: #fff;
  overflow: hidden;
  z-index: 1;
}

#article-336 .btn-slide:hover {
  color: #fff;
}

.btn-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #3498db;
  transform: translateX(-100%);
  transition: 0.3s;
}

.btn-slide:hover::before {
  transform: translateX(0);
}

背景がスライドしてくるインタラクティブな演出です。

スライド背景ボタン

⑱ 回転エフェクトボタン

CSS
.btn-rotate:hover {
  transform: rotate(3deg);
}

軽い遊び心を加えたボタンデザインです。

回転エフェクトボタン

⑲ 押し込みボタン

CSS
.btn-press:active {
  transform: scale(0.95);
}

クリック感を強調し、操作性を向上させます。

押し込みボタン

⑳ シンプルフラットボタン

CSS
.btn-flat {
  color: #333;
  background-color: #eee;
}

どんなUIにも合わせやすい万能デザインです。

シンプルフラットボタン

まとめ

  • ボタンはクリック率・コンバージョンに直結する重要要素
  • シンプル＋インタラクションが基本
  • アニメーションで視線誘導が可能

用途に応じて使い分けることで、UIの質を大きく向上させることができます。

関連記事

PAGE TOP