ボタン・リンク系（CTA）
アフィリエイトリンク(広告)がありますのでご了承ください。
※ 下記のCSSはそのままコピーしてご利用いただけます。 他テーマでも使用可能です。
Lilac Bloom ボタン・CTAデザイン集（全10種）
記事の終わりや重要なリンクに使えるボタンデザインです。全てボタンはマウスを乗せると動き（ホバーエフェクト）が付くように設計しています。
1. 基本のぷっくりボタン
[title]HTML: ぷっくりボタン[/title]
<a href="#" class="lb-btn-standard">詳しくはこちら</a>
[title]CSS: ぷっくりボタン[/title]
.lb-btn-standard {
text-align: center;
font-weight: bold;
cursor: pointer;
display: inline-block;
padding: 12px 35px;
background: #bd93f9;
color: #fff !important;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 4px #7a5cff;
transition: 0.3s;
}
.lb-btn-standard:hover {
transform: translateY(2px);
box-shadow: 0 2px #7a5cff;
}
2. 光が走るアニメーションボタン
[title]HTML: 光るボタン[/title]
<a href="#" class="lb-btn-shine">今すぐチェック</a>
[title]CSS: 光るボタン[/title]
.lb-btn-shine {
text-align: center;
font-weight: bold;
cursor: pointer;
position: relative;
display: inline-block;
padding: 12px 35px;
background: #bd93f9;
color: #fff !important;
text-decoration: none;
border-radius: 4px;
overflow: hidden;
}
.lb-btn-shine::before {
content: "";
position: absolute;
top: -50%;
left: -70%;
width: 30%;
height: 200%;
background: rgba(255, 255, 255, 0.3);
transform: rotate(30deg);
transition: 0.5s;
}
.lb-btn-shine:hover::before {
left: 120%;
}
3. シンプルなアウトライン
[title]HTML: アウトライン[/title]
<a href="#" class="lb-btn-outline">お問い合わせ</a>
[title]CSS: アウトライン[/title]
.lb-btn-outline {
text-align: center;
font-weight: bold;
cursor: pointer;
display: inline-block;
padding: 12px 35px;
border: 2px solid #bd93f9;
color: #bd93f9 !important;
text-decoration: none;
border-radius: 4px;
transition: 0.3s;
}
.lb-btn-outline:hover {
background: #bd93f9;
color: #fff !important;
}
4. 浮き上がる3Dデザイン
[title]HTML: 3D浮き上がり[/title]
<a href="#" class="lb-btn-3d">ダウンロード</a>
[title]CSS: 3D浮き上がり[/title]
.lb-btn-3d {
text-align: center;
font-weight: bold;
cursor: pointer;
display: inline-block;
padding: 12px 35px;
background: #fff;
border: 1px solid #bd93f9;
color: #bd93f9 !important;
text-decoration: none;
border-radius: 8px;
box-shadow: 4px 4px 0 #bd93f9;
transition: 0.3s;
}
.lb-btn-3d:hover {
box-shadow: none;
transform: translate(4px, 4px);
}
5. 美しいグラデーション
[title]HTML: グラデーション[/title]
<a href="#" class="lb-btn-grad">会員登録する</a>
[title]CSS: グラデーション[/title]
.lb-btn-grad {
text-align: center;
font-weight: bold;
cursor: pointer;
display: inline-block;
padding: 12px 35px;
background: linear-gradient(45deg, #bd93f9, #ff79c6);
color: #fff !important;
text-decoration: none;
border-radius: 50px;
transition: 0.3s;
}
.lb-btn-grad:hover {
opacity: 0.8;
filter: contrast(1.2);
}
6. 矢印がスライドするボタン
[title]HTML: 矢印スライド[/title]
<a href="#" class="lb-btn-arrow">次の記事へ</a>
[title]CSS: 矢印スライド[/title]
.lb-btn-arrow {
text-align: center;
font-weight: bold;
cursor: pointer;
display: inline-block;
padding: 12px 45px 12px 25px;
background: #6a5acd;
color: #fff !important;
text-decoration: none;
position: relative;
}
.lb-btn-arrow::after {
content: "→";
position: absolute;
right: 15px;
transition: 0.3s;
}
.lb-btn-arrow:hover::after {
right: 5px;
}
7. ふわふわ動くボタン（浮遊感）
[title]HTML: 浮遊ボタン[/title]
<a href="#" class="lb-btn-float">おすすめを見る</a>
[title]CSS: 浮遊ボタン[/title]
.lb-btn-float {
text-align: center;
font-weight: bold;
cursor: pointer;
display: inline-block;
padding: 12px 35px;
background: #bd93f9;
color: #fff !important;
border-radius: 50px;
animation: floating 2s infinite ease-in-out;
}
@keyframes floating {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
8. マーカー線が伸びるリンク
[title]HTML: マーカーリンク[/title]
<a href="#" class="lb-link-marker">テキストリンクはこちら</a>
[title]CSS: マーカーリンク[/title]
.lb-link-marker {
text-decoration: none;
color: #333 !important;
background: linear-gradient(#bd93f9, #bd93f9) no-repeat 0 100%;
background-size: 0 3px;
transition: 0.3s;
}
.lb-link-marker:hover {
background-size: 100% 3px;
}
9. ネオン風に光るボタン
[title]HTML: ネオン風[/title]
<a href="#" class="lb-btn-neon">公式ショップ</a>
[title]CSS: ネオン風[/title]
.lb-btn-neon {
text-align: center;
font-weight: bold;
cursor: pointer;
display: inline-block;
padding: 10px 30px;
border: 2px solid #bd93f9;
color: #bd93f9 !important;
border-radius: 4px;
transition: 0.3s;
}
.lb-btn-neon:hover {
background: #bd93f9;
color: #fff !important;
box-shadow: 0 0 15px #bd93f9;
}
10. 全幅ワイドボタン（スマホ最適化）
[title]HTML: ワイドボタン[/title]
<a href="#" class="lb-btn-wide">購入ページへ進む</a>
[title]CSS: ワイドボタン[/title]
.lb-btn-wide {
text-align: center;
font-weight: bold;
cursor: pointer;
display: block;
width: 100%;
text-align: center;
padding: 15px 0;
background: #333;
color: #fff !important;
text-decoration: none;
font-weight: bold;
}
.lb-btn-wide:hover {
background: #444;
}
💡 調整のコツ
色は #bd93f9（標準的なライラック）を使用しています。サイトのロゴやメインカラーに合わせて、これらのカラーコードを書き換えるだけで、独自のブランドカラーに統一できます。