戻る
ITトレンド

【コピペOK】HTMLとCSSで作る実用的なボタンデザイン集24選

2025/10/28
西村 力也
【コピペOK】HTMLとCSSで作る実用的なボタンデザイン集24選

はじめに

Webサイトやアプリケーション開発において、ボタンデザインはユーザー体験を大きく左右する重要な要素です。本記事では、フロントエンド開発の現場で即座に使える24種類のボタンデザインを、8つのジャンル別にご紹介します。

すべてのコードはコピー&ペーストですぐに使用でき、SCSSとCSSの両方を掲載しています。初心者の方でも実装しやすいよう、各デザインには使用シーンの説明も付けています。

1. ベーシックデザイン

シンプルで汎用性の高い基本的なボタンデザインです。どんなサイトにも馴染みやすく、初めてのプロジェクトにも最適です。

1-1. シンプルソリッドボタン

使用シーン: メインCTA、送信ボタン、一般的なアクション

HTML:

<button class="btn-simple-solid">Click Me</button>

SCSS:

.btn-simple-solid {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  
  &:hover {
    background: #0056b3;
    transform: translateY(-2px);
  }
  
  &:active {
    transform: translateY(0);
  }
}

CSS:

.btn-simple-solid {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-simple-solid:hover {
  background: #0056b3;
  transform: translateY(-2px);
}

.btn-simple-solid:active {
  transform: translateY(0);
}

1-2. アウトラインボタン

使用シーン: サブアクション、キャンセルボタン、セカンダリCTA

HTML:

<button class="btn-outline">Outline Button</button>

SCSS:

.btn-outline {
  background: transparent;
  color: #007bff;
  border: 2px solid #007bff;
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  
  &:hover {
    background: #007bff;
    color: white;
    transform: translateY(-2px);
  }
  
  &:active {
    transform: translateY(0);
  }
}

CSS:

.btn-outline {
  background: transparent;
  color: #007bff;
  border: 2px solid #007bff;
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: #007bff;
  color: white;
  transform: translateY(-2px);
}

.btn-outline:active {
  transform: translateY(0);
}

1-3. フラットボタン

使用シーン: テキストリンク、軽いアクション、ミニマルデザイン

HTML:

<button class="btn-flat">Flat Button</button>

SCSS:

.btn-flat {
  background: transparent;
  color: #007bff;
  border: none;
  padding: 12px 32px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #007bff;
    transition: width 0.3s ease;
  }
  
  &:hover::after {
    width: 80%;
  }
  
  &:hover {
    color: #0056b3;
  }
}

CSS:

.btn-flat {
  background: transparent;
  color: #007bff;
  border: none;
  padding: 12px 32px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
}

.btn-flat::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #007bff;
  transition: width 0.3s ease;
}

.btn-flat:hover::after {
  width: 80%;
}

.btn-flat:hover {
  color: #0056b3;
}

2. グラデーションデザイン

モダンで目を引くグラデーションボタン。ランディングページやプロモーションサイトに最適です。

2-1. 2色グラデーションボタン

使用シーン: メインCTA、ヒーローセクション、コンバージョンボタン

HTML:

<button class="btn-gradient-two">Gradient Button</button>

SCSS:

.btn-gradient-two {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
  }
  
  &:active {
    transform: translateY(-1px);
  }
}

CSS:

.btn-gradient-two {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-gradient-two:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.btn-gradient-two:active {
  transform: translateY(-1px);
}

2-2. 3色グラデーションボタン

使用シーン: プレミアム機能、有料プラン、特別なオファー

HTML:

<button class="btn-gradient-three">Premium Action</button>

SCSS:

.btn-gradient-three {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #ffd876 100%);
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
  
  &:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(245, 87, 108, 0.6);
  }
  
  &:active {
    transform: scale(1.02);
  }
}

CSS:

.btn-gradient-three {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #ffd876 100%);
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
}

.btn-gradient-three:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(245, 87, 108, 0.6);
}

.btn-gradient-three:active {
  transform: scale(1.02);
}

2-3. アニメーショングラデーションボタン

使用シーン: 注目を集めたいCTA、キャンペーンボタン

HTML:

<button class="btn-gradient-animated">Animated Gradient</button>

SCSS:

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.btn-gradient-animated {
  background: linear-gradient(270deg, #00d2ff, #3a7bd5, #00d2ff);
  background-size: 200% 200%;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  animation: gradientMove 3s ease infinite;
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 210, 255, 0.5);
  }
}

CSS:

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.btn-gradient-animated {
  background: linear-gradient(270deg, #00d2ff, #3a7bd5, #00d2ff);
  background-size: 200% 200%;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  animation: gradientMove 3s ease infinite;
}

.btn-gradient-animated:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 210, 255, 0.5);
}

3. 3D・立体デザイン

立体感のあるボタンは、押したくなる心理効果があります。ゲームサイトやカジュアルなサービスに最適です。

3-1. シャドウ3Dボタン

使用シーン: ゲーム、エンタメサイト、インタラクティブなUI

HTML:

<button class="btn-3d-shadow">Press Me</button>

SCSS:

.btn-3d-shadow {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 6px 0 #c92a2a, 0 8px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.1s ease;
  position: relative;
  top: 0;
  
  &:hover {
    background: #ff5252;
  }
  
  &:active {
    top: 4px;
    box-shadow: 0 2px 0 #c92a2a, 0 4px 6px rgba(0, 0, 0, 0.2);
  }
}

CSS:

.btn-3d-shadow {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 6px 0 #c92a2a, 0 8px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.1s ease;
  position: relative;
  top: 0;
}

.btn-3d-shadow:hover {
  background: #ff5252;
}

.btn-3d-shadow:active {
  top: 4px;
  box-shadow: 0 2px 0 #c92a2a, 0 4px 6px rgba(0, 0, 0, 0.2);
}

3-2. レイヤード3Dボタン

使用シーン: ポップなデザイン、子供向けコンテンツ、カジュアルアプリ

HTML:

<button class="btn-3d-layered">Layered Button</button>

SCSS:

.btn-3d-layered {
  background: #4ecdc4;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 
    0 0 0 3px #44a8a0,
    0 0 0 6px #3a8984,
    0 8px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  position: relative;
  top: 0;
  
  &:hover {
    background: #3dbdb4;
    top: 2px;
  }
  
  &:active {
    top: 4px;
    box-shadow: 
      0 0 0 3px #44a8a0,
      0 0 0 6px #3a8984,
      0 4px 8px rgba(0, 0, 0, 0.15);
  }
}

CSS:

.btn-3d-layered {
  background: #4ecdc4;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 
    0 0 0 3px #44a8a0,
    0 0 0 6px #3a8984,
    0 8px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  position: relative;
  top: 0;
}

.btn-3d-layered:hover {
  background: #3dbdb4;
  top: 2px;
}

.btn-3d-layered:active {
  top: 4px;
  box-shadow: 
    0 0 0 3px #44a8a0,
    0 0 0 6px #3a8984,
    0 4px 8px rgba(0, 0, 0, 0.15);
}

3-3. ボックスシャドウ3Dボタン

使用シーン: プロダクトページ、Eコマース、価格表

HTML:

<button class="btn-3d-box">Buy Now</button>

SCSS:

.btn-3d-box {
  background: #6c5ce7;
  color: white;
  border: none;
  padding: 16px 40px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(108, 92, 231, 0.4);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(108, 92, 231, 0.6);
  }
  
  &:active {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
  }
}

CSS:

.btn-3d-box {
  background: #6c5ce7;
  color: white;
  border: none;
  padding: 16px 40px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(108, 92, 231, 0.4);
  transition: all 0.3s ease;
}

.btn-3d-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(108, 92, 231, 0.6);
}

.btn-3d-box:active {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
}

4. グラスモーフィズム

透明感とぼかし効果を使った、モダンで洗練されたデザインスタイルです。

4-1. ベーシックグラスボタン

使用シーン: モダンなポートフォリオ、SaaSランディングページ

HTML:

<button class="btn-glass-basic">Glass Button</button>

SCSS:

.btn-glass-basic {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  
  &:hover {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
  }
  
  &:active {
    transform: translateY(0);
  }
}

CSS:

.btn-glass-basic {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.btn-glass-basic:hover {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.btn-glass-basic:active {
  transform: translateY(0);
}

4-2. カラードグラスボタン

使用シーン: ダッシュボード、アプリUI、管理画面

HTML:

<button class="btn-glass-colored">Colored Glass</button>

SCSS:

.btn-glass-colored {
  background: rgba(99, 179, 237, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  border: 1px solid rgba(99, 179, 237, 0.4);
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  
  &:hover {
    background: rgba(99, 179, 237, 0.35);
    border: 1px solid rgba(99, 179, 237, 0.6);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.25);
  }
  
  &:active {
    transform: scale(0.98);
  }
}

CSS:

.btn-glass-colored {
  background: rgba(99, 179, 237, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  border: 1px solid rgba(99, 179, 237, 0.4);
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.btn-glass-colored:hover {
  background: rgba(99, 179, 237, 0.35);
  border: 1px solid rgba(99, 179, 237, 0.6);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.25);
}

.btn-glass-colored:active {
  transform: scale(0.98);
}

4-3. ダークグラスボタン

使用シーン: ダークモードUI、ナイトモード、高級感のあるサイト

HTML:

<button class="btn-glass-dark">Dark Glass</button>

SCSS:

.btn-glass-dark {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  
  &:hover {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
  }
  
  &:active {
    transform: translateY(0);
  }
}

CSS:

.btn-glass-dark {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.btn-glass-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.btn-glass-dark:active {
  transform: translateY(0);
}

5. ネオモーフィズム

柔らかい影を使った、まるで画面から浮き出たような立体感のあるデザインです。

5-1. ライトネオモーフボタン

使用シーン: ミニマルデザイン、アプリUI、設定画面

HTML:

<button class="btn-neomorph-light">Neomorph Light</button>

SCSS:

.btn-neomorph-light {
  background: #e0e5ec;
  color: #333;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 8px 8px 16px #b8bdc4, -8px -8px 16px #ffffff;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 6px 6px 12px #b8bdc4, -6px -6px 12px #ffffff;
  }
  
  &:active {
    box-shadow: inset 4px 4px 8px #b8bdc4, inset -4px -4px 8px #ffffff;
  }
}

CSS:

.btn-neomorph-light {
  background: #e0e5ec;
  color: #333;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 8px 8px 16px #b8bdc4, -8px -8px 16px #ffffff;
  transition: all 0.3s ease;
}

.btn-neomorph-light:hover {
  box-shadow: 6px 6px 12px #b8bdc4, -6px -6px 12px #ffffff;
}

.btn-neomorph-light:active {
  box-shadow: inset 4px 4px 8px #b8bdc4, inset -4px -4px 8px #ffffff;
}

5-2. カラードネオモーフボタン

使用シーン: CTA、インタラクティブUI、メインアクション

HTML:

<button class="btn-neomorph-colored">Colored Neomorph</button>

SCSS:

.btn-neomorph-colored {
  background: linear-gradient(145deg, #5e72e4, #5059d0);
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 8px 8px 16px #a9b2c0, -8px -8px 16px #f9ffff;
  transition: all 0.3s ease;
  
  &:hover {
    background: linear-gradient(145deg, #5059d0, #5e72e4);
    box-shadow: 6px 6px 12px #a9b2c0, -6px -6px 12px #f9ffff;
  }
  
  &:active {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.2), inset -4px -4px 8px rgba(255, 255, 255, 0.1);
  }
}

CSS:

.btn-neomorph-colored {
  background: linear-gradient(145deg, #5e72e4, #5059d0);
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 8px 8px 16px #a9b2c0, -8px -8px 16px #f9ffff;
  transition: all 0.3s ease;
}

.btn-neomorph-colored:hover {
  background: linear-gradient(145deg, #5059d0, #5e72e4);
  box-shadow: 6px 6px 12px #a9b2c0, -6px -6px 12px #f9ffff;
}

.btn-neomorph-colored:active {
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.2), inset -4px -4px 8px rgba(255, 255, 255, 0.1);
}

5-3. ダークネオモーフボタン

使用シーン: ダークモードアプリ、音楽プレイヤー、メディアアプリ

HTML:

<button class="btn-neomorph-dark">Dark Neomorph</button>

SCSS:

.btn-neomorph-dark {
  background: #2c2c2c;
  color: #ffffff;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #3e3e3e;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 6px 6px 12px #1a1a1a, -6px -6px 12px #3e3e3e;
  }
  
  &:active {
    box-shadow: inset 4px 4px 8px #1a1a1a, inset -4px -4px 8px #3e3e3e;
  }
}

CSS:

.btn-neomorph-dark {
  background: #2c2c2c;
  color: #ffffff;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #3e3e3e;
  transition: all 0.3s ease;
}

.btn-neomorph-dark:hover {
  box-shadow: 6px 6px 12px #1a1a1a, -6px -6px 12px #3e3e3e;
}

.btn-neomorph-dark:active {
  box-shadow: inset 4px 4px 8px #1a1a1a, inset -4px -4px 8px #3e3e3e;
}

6. アニメーションデザイン

動きのあるボタンは、ユーザーの注意を引き、インタラクティブな体験を提供します。

6-1. リップルエフェクトボタン

使用シーン: タッチUI、モバイルアプリ風デザイン、マテリアルデザイン

HTML:

<button class="btn-ripple">Ripple Effect</button>

SCSS:

.btn-ripple {
  background: #00bcd4;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
  }
  
  &:hover::before {
    width: 300px;
    height: 300px;
  }
  
  &:hover {
    background: #00a5bb;
  }
}

CSS:

.btn-ripple {
  background: #00bcd4;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-ripple:hover::before {
  width: 300px;
  height: 300px;
}

.btn-ripple:hover {
  background: #00a5bb;
}

6-2. スライドインボタン

使用シーン: CTA、ダウンロードボタン、アクションボタン

HTML:

<button class="btn-slide">Slide In Button</button>

SCSS:

.btn-slide {
  background: #ff9800;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
  z-index: 1;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #f57c00;
    transition: left 0.4s ease;
    z-index: -1;
  }
  
  &:hover::before {
    left: 0;
  }
  
  &:hover {
    color: white;
  }
}

CSS:

.btn-slide {
  background: #ff9800;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
  z-index: 1;
}

.btn-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #f57c00;
  transition: left 0.4s ease;
  z-index: -1;
}

.btn-slide:hover::before {
  left: 0;
}

.btn-slide:hover {
  color: white;
}

6-3. バウンスボタン

使用シーン: 緊急アクション、限定オファー、注目を集めたい場所

HTML:

<button class="btn-bounce">Bounce Button</button>

SCSS:

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.btn-bounce {
  background: #e91e63;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  animation: bounce 2s infinite;
  
  &:hover {
    animation: none;
    background: #c2185b;
    transform: scale(1.05);
  }
}

CSS:

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.btn-bounce {
  background: #e91e63;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  animation: bounce 2s infinite;
}

.btn-bounce:hover {
  animation: none;
  background: #c2185b;
  transform: scale(1.05);
}

7. アイコン付きデザイン

テキストとアイコンを組み合わせることで、ボタンの意図がより明確になります。

7-1. 矢印アイコンボタン

使用シーン: 次へ進む、詳細を見る、リンクボタン

HTML:

<button class="btn-icon-arrow">
  Learn More
  <span class="arrow">→</span>
</button>

SCSS:

.btn-icon-arrow {
  background: #2196f3;
  color: white;
  border: none;
  padding: 14px 32px 14px 36px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  
  .arrow {
    transition: transform 0.3s ease;
    display: inline-block;
  }
  
  &:hover {
    background: #1976d2;
    padding-right: 28px;
    
    .arrow {
      transform: translateX(5px);
    }
  }
}

CSS:

.btn-icon-arrow {
  background: #2196f3;
  color: white;
  border: none;
  padding: 14px 32px 14px 36px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.btn-icon-arrow .arrow {
  transition: transform 0.3s ease;
  display: inline-block;
}

.btn-icon-arrow:hover {
  background: #1976d2;
  padding-right: 28px;
}

.btn-icon-arrow:hover .arrow {
  transform: translateX(5px);
}

7-2. ダウンロードアイコンボタン

使用シーン: ファイルダウンロード、資料取得、アプリインストール

HTML:

<button class="btn-icon-download">
  <span class="icon">⬇</span>
  Download
</button>

SCSS:

.btn-icon-download {
  background: #4caf50;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  
  .icon {
    font-size: 20px;
    transition: transform 0.3s ease;
    display: inline-block;
  }
  
  &:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
    
    .icon {
      transform: translateY(3px);
    }
  }
}

CSS:

.btn-icon-download {
  background: #4caf50;
  color: white;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.btn-icon-download .icon {
  font-size: 20px;
  transition: transform 0.3s ease;
  display: inline-block;
}

.btn-icon-download:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.btn-icon-download:hover .icon {
  transform: translateY(3px);
}

7-3. ソーシャルメディアボタン

使用シーン: SNSシェア、ソーシャルログイン、フォローボタン

HTML:

<button class="btn-icon-social">
  <span class="icon">🐦</span>
  Share on Twitter
</button>

SCSS:

.btn-icon-social {
  background: #1da1f2;
  color: white;
  border: none;
  padding: 12px 28px;
  font-size: 15px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  
  .icon {
    font-size: 18px;
  }
  
  &:hover {
    background: #1a91da;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(29, 161, 242, 0.4);
  }
  
  &:active {
    transform: scale(1.02);
  }
}

CSS:

.btn-icon-social {
  background: #1da1f2;
  color: white;
  border: none;
  padding: 12px 28px;
  font-size: 15px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.btn-icon-social .icon {
  font-size: 18px;
}

.btn-icon-social:hover {
  background: #1a91da;
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(29, 161, 242, 0.4);
}

.btn-icon-social:active {
  transform: scale(1.02);
}

8. 特殊効果デザイン

一風変わった特殊効果を持つボタンで、サイトに個性を与えます。

8-1. グリッチエフェクトボタン

使用シーン: テクノロジー系サイト、サイバーパンクデザイン、ゲーム

HTML:

<button class="btn-glitch">Glitch Effect</button>

SCSS:

.btn-glitch {
  background: transparent;
  color: #00ff00;
  border: 2px solid #00ff00;
  padding: 14px 36px;
  font-size: 16px;
  font-family: monospace;
  border-radius: 0;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  transition: all 0.3s ease;
  
  &:hover {
    background: rgba(0, 255, 0, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
    text-shadow: 
      -2px 0 #ff00ff,
      2px 0 #00ffff;
  }
  
  &:active {
    transform: scale(0.98);
  }
}

CSS:

.btn-glitch {
  background: transparent;
  color: #00ff00;
  border: 2px solid #00ff00;
  padding: 14px 36px;
  font-size: 16px;
  font-family: monospace;
  border-radius: 0;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  transition: all 0.3s ease;
}

.btn-glitch:hover {
  background: rgba(0, 255, 0, 0.1);
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
  text-shadow: 
    -2px 0 #ff00ff,
    2px 0 #00ffff;
}

.btn-glitch:active {
  transform: scale(0.98);
}

8-2. ネオンボタン

使用シーン: ナイトクラブ、イベントサイト、80sレトロデザイン

HTML:

<button class="btn-neon">Neon Glow</button>

SCSS:

.btn-neon {
  background: transparent;
  color: #ff006e;
  border: 3px solid #ff006e;
  padding: 14px 36px;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: all 0.3s ease;
  box-shadow: 
    0 0 10px #ff006e,
    0 0 20px #ff006e,
    inset 0 0 10px rgba(255, 0, 110, 0.2);
  
  &:hover {
    background: #ff006e;
    color: #fff;
    box-shadow: 
      0 0 20px #ff006e,
      0 0 40px #ff006e,
      0 0 60px #ff006e,
      inset 0 0 20px rgba(255, 255, 255, 0.2);
    text-shadow: 0 0 10px #fff;
  }
  
  &:active {
    transform: scale(0.95);
  }
}

CSS:

.btn-neon {
  background: transparent;
  color: #ff006e;
  border: 3px solid #ff006e;
  padding: 14px 36px;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: all 0.3s ease;
  box-shadow: 
    0 0 10px #ff006e,
    0 0 20px #ff006e,
    inset 0 0 10px rgba(255, 0, 110, 0.2);
}

.btn-neon:hover {
  background: #ff006e;
  color: #fff;
  box-shadow: 
    0 0 20px #ff006e,
    0 0 40px #ff006e,
    0 0 60px #ff006e,
    inset 0 0 20px rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 10px #fff;
}

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

8-3. レトロピクセルボタン

使用シーン: レトロゲーム風サイト、8bitデザイン、ノスタルジックなUI

HTML:

<button class="btn-retro-pixel">Press Start</button>

SCSS:

.btn-retro-pixel {
  background: #ffd700;
  color: #000;
  border: 4px solid #000;
  padding: 12px 32px;
  font-size: 16px;
  font-family: 'Courier New', monospace;
  border-radius: 0;
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 #000;
  transition: all 0.1s ease;
  position: relative;
  top: 0;
  left: 0;
  
  &:hover {
    background: #ffed4e;
  }
  
  &:active {
    top: 4px;
    left: 4px;
    box-shadow: 0 0 0 #000;
  }
}

CSS:

.btn-retro-pixel {
  background: #ffd700;
  color: #000;
  border: 4px solid #000;
  padding: 12px 32px;
  font-size: 16px;
  font-family: 'Courier New', monospace;
  border-radius: 0;
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 #000;
  transition: all 0.1s ease;
  position: relative;
  top: 0;
  left: 0;
}

.btn-retro-pixel:hover {
  background: #ffed4e;
}

.btn-retro-pixel:active {
  top: 4px;
  left: 4px;
  box-shadow: 0 0 0 #000;
}

まとめ

本記事では、8つのジャンルに分けて24種類のボタンデザインをご紹介しました。各デザインはそれぞれ異なる使用シーンに適しており、プロジェクトの目的やターゲットユーザーに合わせて選択することが重要です。

ボタン選びのポイント

  1. ブランドイメージに合わせる - 企業サイトならベーシック、エンタメならアニメーション
  2. ユーザー行動を促す - CTAボタンは目立つデザイン（グラデーション、3D）を
  3. 一貫性を保つ - サイト全体で統一感のあるデザイントーンを
  4. アクセシビリティを考慮 - 十分なコントラスト比とタップ領域を確保

カスタマイズのヒント

紹介したコードは基本形です。以下のようにカスタマイズすることで、よりプロジェクトに適したボタンになります：

  • 色の変更 - ブランドカラーに合わせる
  • サイズ調整 - paddingやfont-sizeで大きさを変更
  • 角の丸み - border-radiusで雰囲気を調整
  • アニメーション速度 - transitionの秒数を変更

すべてのコードはコピー&ペーストですぐに使用できます。ぜひプロジェクトに取り入れて、ユーザーエクスペリエンスの向上にお役立てください。

西村 力也

西村 力也

代表取締役

2002年からWeb制作・システム開発に従事。React、Next.js、TypeScriptを中心としたモダンなフロントエンド開発の専門家。AI検索最適化（AIO）の先駆者として、ChatGPT、Perplexity等のAI検索エンジン対応を推進。三重県津市を拠点に、東海地方の企業様のデジタル変革を支援しています。

React/Next.js開発TypeScriptAI検索最適化（AIO）SEO/MEO対策

関連記事

3秒で離脱される時代のWebサイト救出作戦 〜不動産サイトを2倍速くした改善事例〜
2025/10/24
ITトレンド

3秒で離脱される時代のWebサイト救出作戦 〜不動産サイトを2倍速くした改善事例〜

「このサイト、遅いな…」そう感じた瞬間、あなたはブラウザの「戻る」ボタンを押していませんか？実は、現代のユーザーは驚くほど我慢強くありません。Googleの調査によれば、ページの読み込みに3秒以上かかると、53%のユーザーが離脱するというデ...

アプリ試作開発で新規事業を成功に導く完全ガイド｜最小限の投資で市場検証を実現
2025/10/21
ITトレンド

アプリ試作開発で新規事業を成功に導く完全ガイド｜最小限の投資で市場検証を実現

新規事業を立ち上げる際、多くの企業が直面する課題があります。それは「多額の開発費用をかけたのに、市場に受け入れられなかった」という失敗です。実際、完璧な機能を備えたアプリを開発しても、ユーザーのニーズとズレていれば、投資は無駄になってしまい...

AIペアプログラミングで始めるTo-Doアプリ開発：初心者が知るべきメリットとリスク
2025/10/16
ITトレンド

AIペアプログラミングで始めるTo-Doアプリ開発：初心者が知るべきメリットとリスク

近年、AIペアプログラミングという新しい開発手法が注目を集めています。Cursor AIやClaude Code、GitHub Copilotなどのツールを使えば、プログラミング初心者でも驚くほど簡単にアプリケーションを作成できるようになり...