ホーム > CSS > 【10選】コピペで使えるオシャレなボタンのHTML、CSSをまとめました

【10選】コピペで使えるオシャレなボタンのHTML、CSSをまとめました

# CSS

2025-05-30

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

グラデーションホバーボタン
ネオンエフェクトボタン
3D プッシュボタン
グラスモーフィズムボタン
アウトライン拡張ボタン
波紋エフェクトボタン
スライドテキストボタン
グロウエフェクトボタン
モーフィングボタン
サイバーパンクボタン
使用上のポイント
まとめ

今回は、Webサイトやアプリケーションで使える、オシャレなボタンデザインを10種類ご紹介します。すべてHTML+CSSのみで実装されており、コピペですぐに使えます。

UXデザインの法則 ―最高のプロダクトとサービスを支える心理学

Jon Yablonski
￥1,980 (2024/09/16 13:00時点 Amazon調べ) 現在の値段の詳細はこちら

Amazon

グラデーションホバーボタン

美しいグラデーションとホバー時の浮遊効果が特徴的なボタンです。

HTML

<button class="btn-gradient">CLICK ME</button>

CSS

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

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(102, 126, 234, 0.5);
}

ネオンエフェクトボタン

サイバーパンク風の光るネオン効果が印象的なボタンです。

HTML

<button class="btn-neon">NEON</button>

CSS

.btn-neon {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: #00ff88;
  background: transparent;
  border: 2px solid #00ff88;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.btn-neon:hover {
  color: #000;
  background: #00ff88;
  box-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88, 0 0 60px #00ff88;
}

3D プッシュボタン

クリック時に押し込まれる 3D 効果が楽しいボタンです。

HTML

<button class="btn-3d">PUSH ME</button>

CSS

.btn-3d {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: #e74c3c;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.1s ease;
  box-shadow: 0 5px 0 #c0392b;
}

.btn-3d:hover {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #c0392b;
}

.btn-3d:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 #c0392b;
}

グラスモーフィズムボタン

透明感のあるモダンなデザインが特徴のボタンです。

HTML

<button class="btn-glass">GLASS</button>

CSS

.btn-glass {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

アウトライン拡張ボタン

ホバー時に背景が左から右へ流れる効果が美しいボタンです。

HTML

<button class="btn-outline">HOVER ME</button>

CSS

.btn-outline {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: #3498db;
  background: transparent;
  border: 2px solid #3498db;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #3498db;
  transition: all 0.3s ease;
  z-index: -1;
}

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

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

波紋エフェクトボタン

ホバー時に中心から波紋が広がる効果が印象的なボタンです。

HTML

<button class="btn-ripple">RIPPLE</button>

CSS

.btn-ripple {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: #9b59b6;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-ripple::after {
  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::after {
  width: 300px;
  height: 300px;
}

スライドテキストボタン

矢印がスライドしてくるアニメーションが特徴的なボタンです。

HTML

<button class="btn-slide"><span>SLIDE</span></button>

CSS

.btn-slide {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: #2ecc71;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-slide span {
  position: relative;
  z-index: 1;
}

.btn-slide::before {
  content: "→";
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  font-size: 20px;
  transition: all 0.3s ease;
}

.btn-slide:hover::before {
  left: 85%;
}

グロウエフェクトボタン

常に光り続ける輝きエフェクトが印象的なボタンです。

HTML

<button class="btn-glow">GLOW</button>

CSS

.btn-glow {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: #ff6b6b;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.6);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 107, 107, 0.8);
  }
}

.btn-glow:hover {
  transform: scale(1.05);
}

モーフィングボタン

ホバー時に形が変化するトランスフォーム効果が楽しいボタンです。

HTML

<button class="btn-morph">MORPH</button>

CSS

.btn-morph {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  background: #ffd93d;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-morph:hover {
  border-radius: 50px;
  transform: scale(1.1);
  background: #ffcd3c;
}

サイバーパンクボタン

近未来的なデザインとホバー効果が特徴的なボタンです。

HTML

<button class="btn-cyber">CYBER</button>

CSS

.btn-cyber {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: #0ff;
  background: #000;
  border: 2px solid #0ff;
  cursor: pointer;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 2px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-cyber::before,
.btn-cyber::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background: #0ff;
  transition: all 0.3s ease;
}

.btn-cyber::before {
  top: -2px;
  left: -2px;
}

.btn-cyber::after {
  bottom: -2px;
  right: -2px;
}

.btn-cyber:hover {
  color: #000;
  background: #0ff;
  box-shadow: 0 0 30px #0ff, inset 0 0 30px rgba(0, 255, 255, 0.3);
}

.btn-cyber:hover::before {
  width: 100%;
}

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

使用上のポイント

レスポンシブ対応: すべてのボタンはモバイルデバイスでも綺麗に表示されます
カスタマイズ可能: 色、サイズ、フォントなどは自由に変更できます
アクセシビリティ: 適切なコントラストとホバー効果により、使いやすさを考慮しています
パフォーマンス: CSS のみの実装なので、ページの読み込み速度に影響しません

お好みのデザインをコピーして、自由にカスタマイズしてご利用ください！

まとめ

これらのボタンはすべて HTML+CSS のみで実装されており、JavaScript は不要です。

それぞれのボタンには独自の視覚効果があり、用途に応じて使い分けることができます。

フィードバックのお願い

この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。

まっつん

フリーランス、ITエンジニア

【経験・スキル】
開発経験５年
Laravel / PHP / AWS / Vue.js / React(少々) / SEO(少々)

【趣味】
・愛娘と遊ぶ
・テニス
・釣り旅行
・サッカー観戦

【ひとこと】
メモ代わりに始めたこのブログも結構な流入になってきていて、過去の記事を徐々にリライトしています。古くて動かない記事とかあれば、お問い合わせから教えてください。

開発のお仕事に関しても、お気軽にご相談ください。