【Cocoon】コピペでOK！おしゃれブログを目指すためのボタンCSS

はじめに
1. COCOON実装手順
シャイニングカラーズグラデーションボタン
カラフルトランジションボタン
メタリックトリコロールボタン
ビビッドグラデーション波紋ボタン
メタリックゴールドスキャンボタン
多層メタリックシャドウボタン
パステルグラデーション波紋ボタン
トリコロールグラデーション・パーティ
パステルウォーブボタン
カラフルスライドインボタン
夕焼けのグラデーションボタン

はじめに

おはこんばんにちは、くつろぎAIライフです。

このブログでは、インターネットテック系の情報をお届けします。

Stable DiffusionやChatGPTなど、目まぐるしい勢いでAIが進化していく令和の時代。
使える技術はどんどん使っていきましょう。そしてくつろぎライフを実現させましょう。

WordPressテーマ Cocoonにはボタンのバリエーションは用意されていません。

なのでブログをおしゃれにしたい場合、CSSのカスタマイズが必須なのです。

ただ、CSSカスタマイズには終わりがありませんし、探すのも大変です。
そこで今回は、ボタンのアニメーション付きCSSを11個ほど自作しましたので、それらを紹介します。

COCOON実装手順

COCOONテーマのダッシュボードにログインします。
「外観」メニューから「カスタマイズ」を選択します。
“追加CSS” タブをクリックします。
CSSコードをコピーし、入力フィールドに貼り付けます

シャイニングカラーズグラデーションボタン

プレビュー

詳細解説

このCSSは、背景に虹色のグラデーションを適用し、ボタンにマウスを乗せた際に背景が滑らかに光るアニメーションを持っています。
背景色は明るいブルーからパープルに変化し、シンプルながらも目を引くデザインに仕上がっています。
ボタンの形状は柔らかい角を持たせることでモダンな印象を与え、またレスポンシブデザインにより、ビューのサイズに応じてボタンのサイズが適切に調整されるため、連絡先フォームやCTAボタンに最適です。

CSSコード

.btn-l9ph6mj2 {
  display: inline-block;
  padding: 12px 30px;
  font-size: 1rem;
  color: #fff;
  border: none;
  border-radius: 8px;
  background: linear-gradient(45deg, #00e8ff, #0077ff);
  cursor: pointer;
  transition: background 0.5s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-l9ph6mj2:hover {
  background: linear-gradient(45deg, #0077ff, #d800ff);
  transform: scale(1.05);
}

@media (max-width: 600px) {
  .btn-l9ph6mj2 {
    padding: 10px 25px;
    font-size: 0.9rem;
  }
}

カラフルトランジションボタン

プレビュー

詳細解説

このデザインは、滑らかなグラデーションと色彩豊かなボタンアニメーションを特徴としています。
標準状態ではマカロンカラーのパステルグラデーションが背景に設定されており、ホバー時にはビビッドカラーへと変化し、ユーザーの目を引きます。
また、ホバー状態ではシャドウが少し拡大することで、立体感を生み出しクリックを促します。
レスポンシブ対応しており、どのデバイスからも美しく表示され、特にカラフルなデザインでユーザーを楽しませる用途に最適です。

CSSコード

.btn-gqn0e6t8 {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 75%);
  color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.btn-gqn0e6t8:hover {
  background: linear-gradient(90deg, #ff512f 0%, #dd2476 75%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
.btn-gqn0e6t8:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

メタリックトリコロールボタン

プレビュー

詳細解説

このデザインは、ゴールド、シルバー、ブロンズのメタリックカラーを使用したトリコロールグラデーションに、ボタン全体に深いシャドウがかかる効果を加えています。
ホバー時にはボタンが軽く持ち上がり、背景の色が流れるように移動します。
アクセシビリティにも配慮し、フォーカス時にアウトラインを明確に表示します。
また、柔らかなトランジションにより高級感を強調しており、視覚的にも推奨されます。
モダンなウェブサイトやアプリケーションでの使用に最適です。

CSSコード

.btn-86f4flxn {
  background: linear-gradient(135deg, #FFD700, #C0C0C0, #CD7F32);
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
  outline: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-86f4flxn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 200%;
  height: 100%;
  background: linear-gradient(135deg, #FFD700, #C0C0C0, #CD7F32);
  z-index: -1;
  transition: left 0.5s ease;
}

.btn-86f4flxn:hover::before {
  left: -10%;
}

.btn-86f4flxn:hover {
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
  transform: translateY(-3px);
}

.btn-86f4flxn:focus-visible {
  outline: 2px solid #C0C0C0;
}

ビビッドグラデーション波紋ボタン

プレビュー

詳細解説

このデザインはビビッドなグラデーション（#FF6B6Bから#4ECDC4）を使用し、ホバー時に波紋のようなエフェクトを生成します。
ボタンはborder-radiusを使って魅力的な丸みを持ち、ホバー時には軽やかな拡大と色のグラデーションアニメーションが発生します。
また、背景には波紋を模した疑似要素を使い、背景色が変化することで視覚効果を高めています。
日常使いのウェブシステムからクリエイティブなサイトまで広く対応します。

CSSコード

.btn-p4hrmasx {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
    border: none;
    border-radius: 30px;
    cursor: pointer;
    outline: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-p4hrmasx:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, transparent, rgba(0, 0, 0, 0.1));
    transition: all 0.5s ease;
    transform: translate(-50%, -50%) scale(0);
}

.btn-p4hrmasx:hover:before {
    transform: translate(-50%, -50%) scale(1);
}

.btn-p4hrmasx:hover {
    transform: scale(1.05);
    background-position: right center;
}

メタリックゴールドスキャンボタン

プレビュー

詳細解説

このCSSデザインは、メタリックなゴールドの色合いを採用し、視覚的に高級感を演出します。
色は#DAA520の金色を基調とし、ホバー時にスキャン効果で輝きが横に流れます。
ボタンに立体感を持たせるために、box-shadowを使用して微細な陰影で深みを与えています。
アニメーションはホバー時にトリガーされ、視線を引く効果があります。
focus-stateではアウトラインを外し、ユーザーの操作性を向上させています。

CSSコード

@keyframes scan {
  0% { background-position: 200% 0%; }
  100% { background-position: 0% 0%; }
}

.btn-08srosat {
  background: linear-gradient(270deg, #FFD700, #DAA520);
  background-size: 200% 200%;
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
  outline: none;
}

.btn-08srosat:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  animation: scan 0.6s ease-in-out infinite;
}

.btn-08srosat:focus-visible {
  outline-offset: 4px;
  outline: 2px solid #FFD700;
}

多層メタリックシャドウボタン

プレビュー

詳細解説

このデザインは金属的な光沢を持つグラデーション（#D4AF37 → #FFD700）と、複数のネオン風シャドウを組み合わせたボタンを特徴とします。
ホバー時には拡大と影の変化が滑らかにアニメートされ、視覚的に圧倒的な存在感を醸し出します。
ボックスシャドウと様々なオレンジの濃淡で多層の奥行きを与え、hoverでの立体感を増します。
transitionやトランスフォームも使い、ボタンのレスポンシブ対応と実用性を備えています。

CSSコード

/* メタリックな光沢とネオンシャドウのボタンデザイン */
.btn-9qzuv1ok {
  background: linear-gradient(45deg, #D4AF37, #FFD700);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 10px 15px rgba(255,215,0,0.2), 0 20px 25px rgba(255,165,0,0.3);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.4s ease-out;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-9qzuv1ok::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 215, 0, 0.2);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 0;
  mix-blend-mode: multiply;
}

.btn-9qzuv1ok:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0,0,0,0.1), 0 12px 20px rgba(255,215,0,0.3), 0 25px 30px rgba(255,165,0,0.4);
}

.btn-9qzuv1ok:hover::after {
  opacity: 1;
}

パステルグラデーション波紋ボタン

プレビュー

詳細解説

このデザインは柔らかいパステルカラー（#FFE5E5から#D4F1F4）のグラデーションを背景に持ち、波紋のようなホバーアニメーションをもっています。
ホバー時にはボタンが僅かに拡大し、背景グラデーションが移動します。
さらに撮影風に見えるパステルのテキストシャドウが現れ、ボタンに柔和な立体感を与えます。
このミニマルで優しいデザインは呼び出しのボタンや登録ボタンに最適です。

CSSコード

.btn-zwvu2fit {
    background: linear-gradient(90deg, #FFE5E5, #D4F1F4);
    color: #333;
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.4s ease;
    outline: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-zwvu2fit::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, #D4F1F4, #FFE5E5);
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.6s ease;
    border-radius: inherit;
    z-index: -1;
}

.btn-zwvu2fit:hover::before {
    transform: translate(-50%, -50%) scale(1.1);
}

.btn-zwvu2fit:hover {
    transform: scale(1.05);
    background: linear-gradient(90deg, #D4F1F4, #FFE5E5);
    color: #000;
}

.btn-zwvu2fit:focus {
    outline: 2px dashed #FF9AA2;
    outline-offset: 4px;
}

トリコロールグラデーション・パーティ

プレビュー

詳細解説

このデザインはトリコロールグラデーション（#FFA500, #FF4500, #8A2BE2）を使用し、ボタンにカラフルなシャドウ効果を持たせています。
ホバー時にボタンが拡大し、グラデーションが回転するアニメーションが起動するため、ボタンを視覚的に際立たせます。
この効果によりユーザーの注意を引くことができ、視覚的にインタラクティブな体験を提供します。

CSSコード

.btn-we3izbus {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1.2rem;
  color: #fff;
  background: linear-gradient(90deg, #FFA500, #FF4500, #8A2BE2);
  border: none;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  outline: none;
}

.btn-we3izbus:hover {
  transform: scale(1.1);
  background-position: 100% 0;
  box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
}

.btn-we3izbus:focus-visible {
  outline: 2px dashed #FF4500;
}

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

.btn-we3izbus:hover {
  animation: gradientRotation 0.5s ease-in-out infinite;
}

パステルウォーブボタン

プレビュー

詳細解説

このボタンデザインでは、柔らかいパステルグラデーション（#FFE5E5 → #D4F1F4）を背景に使用し、ホバー時に滑らかな波紋アニメーションが発生します。
エレガントで落ち着いた印象を与えつつ、視覚的なインパクトを適度に持たせています。
レスポンシブデザインで、フレックスボックスを用いたレイアウトを採用し、どんな画面サイズでも美しさを保ちます。
また、アクセシビリティのため、フォーカス時にはアウトラインが強調される設定になっています。

CSSコード

.btn-aqiiz516 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #FFE5E5, #D4F1F4);
  color: #333;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
  position: relative;
  overflow: hidden;
  outline: none;
}
.btn-aqiiz516::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, #FFFFFF55 10%, transparent 10%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.1);
  transition: transform 0.5s, opacity 0.5s;
  border-radius: 50%;
}
.btn-aqiiz516:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.btn-aqiiz516:focus {
  outline: 2px solid #8EC5FC;
  outline-offset: 4px;
}

カラフルスライドインボタン

プレビュー

詳細解説

このデザインは、明るいビビッドなグラデーション（#FF6B6Bから#4ECDC4）とカラフルなシャドウ効果を備えたボタンです。
ホバー時に、ボタンがわずかに拡大しグラデーションがスライドして動き出すアニメーションを提供します。
また、ボックスシャドウが増してネオン効果を与えます。
このデザインはモダンな見た目を保持しつつも、視覚的なインタラクションを豊かにし、画面上での注目を引きやすくしています。

CSSコード

.btn-03kaz7zu {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  color: #ffffff;
  background: linear-gradient(90deg, #FF6B6B, #4ECDC4);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.btn-03kaz7zu::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  background: linear-gradient(90deg, #4ECDC4, #FF6B6B, #4ECDC4);
  transition: all 0.4s ease-in-out;
  z-index: 1;
}

.btn-03kaz7zu:hover::before {
  left: -200%;
}

.btn-03kaz7zu:hover {
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

.btn-03kaz7zu:focus-visible {
  outline: 2px solid rgba(78, 205, 196, 0.5);
}

夕焼けのグラデーションボタン

プレビュー

詳細解説

デザインの特徴: このボタンは夕焼けを思わせる鮮やかなグラデーションが魅力です。
使用されている色: 背景は、燃えるようなオレンジの#FF5F6Dから、暖色系の#FFC371へのグラデーションがあり、4色のぼやけた影（シャドウ）で立体感を演出しています。
活用シーン: 特に夏のキャンペーンサイトや、旅行代理店のプロモーションページなどで視覚的なインパクトを与えたい場面に適しています。

CSSコード

.btn-qw1z8n4e {
    background: linear-gradient(135deg, #FF5F6D 0%, #FFC371 100%);
    border: none;
    border-radius: 50px;
    color: white;
    padding: 15px 30px;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(255, 95, 109, 0.4);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: inline-block;
    cursor: pointer;
    outline: none;
    text-align: center;
}

.btn-qw1z8n4e:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(255, 95, 109, 0.6);
}