✨ ボタンの使い方
ボタンをクリックすると、HTMLとCSSコードがポップアップ！コピーしてあなたのサイトに貼れば、キラキラボタンが使えるよ！
カスタマイズのコツ：
- 色を変える：CSSの
backgroundやcolorを好きな色に（例：#ff4444を#ff99ccに）。 - サイズを変える：CSSの
paddingやfont-sizeを調整（例：padding: 10px 20pxを15px 30pxに）。 - キラキラを変える：CSSの
animationで速度や光り方をチェンジ！
✨ シンプルカラー
どんなボタン？ シンプルで使いやすい単色のボタン！どんなサイトにもマッチするよ！初心者さんにピッタリ！
解説：ポップなカラーで、ホバーすると少し暗くなるエフェクト付き。赤、青、緑、ピンク、黄色の5色＋パープルを用意したよ！色はCSSのbackgroundで簡単に変更可能！
.btn-simple-red {
background: #ff4444; /* 色を変更するにはここを編集 */
color: #ffffff;
padding: 10px 20px; /* サイズを変更するにはここを編集 */
border: none;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
transition: background 0.3s;
}
.btn-simple-red:hover {
background: #cc3333; /* ホバー時の色 */
}
.btn-simple-blue {
background: #4444ff; /* 色を変更するにはここを編集 */
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
transition: background 0.3s;
}
.btn-simple-blue:hover {
background: #3333cc;
}
.btn-simple-green {
background: #44ff44; /* 色を変更するにはここを編集 */
color: #000000;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
transition: background 0.3s;
}
.btn-simple-green:hover {
background: #33cc33;
}
.btn-simple-pink {
background: #ff69b4; /* 色を変更するにはここを編集 */
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
transition: background 0.3s;
}
.btn-simple-pink:hover {
background: #cc5590;
}
.btn-simple-yellow {
background: #ffd700; /* 色を変更するにはここを編集 */
color: #000000;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
transition: background 0.3s;
}
.btn-simple-yellow:hover {
background: #ccac00;
}
.btn-simple-purple {
background: #800080; /* 色を変更するにはここを編集 */
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
transition: background 0.3s;
}
.btn-simple-purple:hover {
background: #660066;
}
✨ キラキラエフェクト
どんなボタン？ キラキラ光るエフェクトが可愛いボタン！クリックしたくなる輝きで、サイトを華やかに！
解説：キラキラはCSSの::beforeで作った光のアニメーション！5色＋パープルで、ゴールドの枠がポイント。光の速さはanimationで調整できるよ！
.btn-sparkle-red {
background: #ff4444; /* 背景色を変更 */
color: #ffffff;
padding: 10px 20px; /* サイズを変更 */
border: 2px solid #ffd700; /* 枠の色 */
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn-sparkle-red::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #ffd700, transparent);
animation: sparkle 2s infinite; /* キラキラ速度を変更 */
}
@keyframes sparkle {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
.btn-sparkle-blue {
background: #4444ff; /* 背景色を変更 */
color: #ffffff;
padding: 10px 20px;
border: 2px solid #ffd700;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn-sparkle-blue::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #ffd700, transparent);
animation: sparkle 2s infinite;
}
@keyframes sparkle {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
.btn-sparkle-green {
background: #44ff44; /* 背景色を変更 */
color: #000000;
padding: 10px 20px;
border: 2px solid #ffd700;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn-sparkle-green::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #ffd700, transparent);
animation: sparkle 2s infinite;
}
@keyframes sparkle {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
.btn-sparkle-pink {
background: #ff69b4; /* 背景色を変更 */
color: #ffffff;
padding: 10px 20px;
border: 2px solid #ffd700;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn-sparkle-pink::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #ffd700, transparent);
animation: sparkle 2s infinite;
}
@keyframes sparkle {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
.btn-sparkle-yellow {
background: #ffd700; /* 背景色を変更 */
color: #000000;
padding: 10px 20px;
border: 2px solid #ffd700;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn-sparkle-yellow::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #ffd700, transparent);
animation: sparkle 2s infinite;
}
@keyframes sparkle {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
.btn-sparkle-purple {
background: #800080; /* 背景色を変更 */
color: #ffffff;
padding: 10px 20px;
border: 2px solid #ffd700;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn-sparkle-purple::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #ffd700, transparent);
animation: sparkle 2s infinite;
}
@keyframes sparkle {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
✨ ネオン
どんなボタン？ ネオンの輝きで夜の街みたい！かっこいい雰囲気で目立っちゃうボタン！
解説：CSSのbox-shadowで光るエフェクト！ホバーするとさらに輝くよ！5色＋パープルで、枠と文字の色を揃えたデザイン。光の強さはbox-shadowで調整可能！
.btn-neon-red {
background: #000;
color: #ff4444; /* 文字色を変更 */
padding: 10px 20px; /* サイズを変更 */
border: 2px solid #ff4444; /* 枠の色 */
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
box-shadow: 0 0 10px #ff4444; /* 光の強さを変更 */
transition: box-shadow 0.3s;
}
.btn-neon-red:hover {
box-shadow: 0 0 20px #ff4444;
}
.btn-neon-blue {
background: #000;
color: #4444ff; /* 文字色を変更 */
padding: 10px 20px;
border: 2px solid #4444ff;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
box-shadow: 0 0 10px #4444ff;
transition: box-shadow 0.3s;
}
.btn-neon-blue:hover {
box-shadow: 0 0 20px #4444ff;
}
.btn-neon-green {
background: #000;
color: #44ff44; /* 文字色を変更 */
padding: 10px 20px;
border: 2px solid #44ff44;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
box-shadow: 0 0 10px #44ff44;
transition: box-shadow 0.3s;
}
.btn-neon-green:hover {
box-shadow: 0 0 20px #44ff44;
}
.btn-neon-pink {
background: #000;
color: #ff69b4; /* 文字色を変更 */
padding: 10px 20px;
border: 2px solid #ff69b4;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
box-shadow: 0 0 10px #ff69b4;
transition: box-shadow 0.3s;
}
.btn-neon-pink:hover {
box-shadow: 0 0 20px #ff69b4;
}
.btn-neon-yellow {
background: #000;
color: #ffd700; /* 文字色を変更 */
padding: 10px 20px;
border: 2px solid #ffd700;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
box-shadow: 0 0 10px #ffd700;
transition: box-shadow 0.3s;
}
.btn-neon-yellow:hover {
box-shadow: 0 0 20px #ffd700;
}
.btn-neon-purple {
background: #000;
color: #800080; /* 文字色を変更 */
padding: 10px 20px;
border: 2px solid #800080;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
box-shadow: 0 0 10px #800080;
transition: box-shadow 0.3s;
}
.btn-neon-purple:hover {
box-shadow: 0 0 20px #800080;
}
✨ グラデーション
どんなボタン？ 色が滑らかに変わるグラデーション！モダンでオシャレなサイトにピッタリ！
解説：CSSのlinear-gradientで色をブレンド！5色＋パープルで、動くグラデーションがキラキラ感UP！色はbackgroundで変更できるよ！
.btn-gradient-red {
background: linear-gradient(45deg, #ff4444, #ff9999); /* グラデーション色を変更 */
color: #ffffff;
padding: 10px 20px; /* サイズを変更 */
border: none;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
background-size: 200%;
animation: gradientShift 3s infinite; /* 速度を変更 */
}
.btn-gradient-blue {
background: linear-gradient(45deg, #4444ff, #9999ff); /* グラデーション色を変更 */
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
background-size: 200%;
animation: gradientShift 3s infinite;
}
.btn-gradient-green {
background: linear-gradient(45deg, #44ff44, #99ff99); /* グラデーション色を変更 */
color: #000000;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
background-size: 200%;
animation: gradientShift 3s infinite;
}
.btn-gradient-pink {
background: linear-gradient(45deg, #ff69b4, #ff99cc); /* グラデーション色を変更 */
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
background-size: 200%;
animation: gradientShift 3s infinite;
}
.btn-gradient-yellow {
background: linear-gradient(45deg, #ffd700, #ffff99); /* グラデーション色を変更 */
color: #000000;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
background-size: 200%;
animation: gradientShift 3s infinite;
}
.btn-gradient-purple {
background: linear-gradient(45deg, #800080, #cc99cc); /* グラデーション色を変更 */
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
background-size: 200%;
animation: gradientShift 3s infinite;
}
✨ レトロピクセル
どんなボタン？ 8ビットゲームみたいなレトロなボタン！懐かしい雰囲気で遊び心をプラス！
解説：ピクセル感はborder-radius: 0とCourier Newフォントで再現！5色＋パープルで、光る枠がレトロ感をUP！色はcolorとborderで変更！
.btn-retro-red {
background: #000;
color: #ff4444; /* 文字色を変更 */
padding: 10px 20px; /* サイズを変更 */
border: 2px solid #ff4444; /* 枠の色 */
border-radius: 0;
font-family: 'Courier New', monospace;
cursor: pointer;
box-shadow: 0 0 5px #ff4444; /* 光の強さを変更 */
}
.btn-retro-blue {
background: #000;
color: #4444ff; /* 文字色を変更 */
padding: 10px 20px;
border: 2px solid #4444ff;
border-radius: 0;
font-family: 'Courier New', monospace;
cursor: pointer;
box-shadow: 0 0 5px #4444ff;
}
.btn-retro-green {
background: #000;
color: #44ff44; /* 文字色を変更 */
padding: 10px 20px;
border: 2px solid #44ff44;
border-radius: 0;
font-family: 'Courier New', monospace;
cursor: pointer;
box-shadow: 0 0 5px #44ff44;
}
.btn-retro-pink {
background: #000;
color: #ff69b4; /* 文字色を変更 */
padding: 10px 20px;
border: 2px solid #ff69b4;
border-radius: 0;
font-family: 'Courier New', monospace;
cursor: pointer;
box-shadow: 0 0 5px #ff69b4;
}
.btn-retro-yellow {
background: #000;
color: #ffd700; /* 文字色を変更 */
padding: 10px 20px;
border: 2px solid #ffd700;
border-radius: 0;
font-family: 'Courier New', monospace;
cursor: pointer;
box-shadow: 0 0 5px #ffd700;
}
.btn-retro-purple {
background: #000;
color: #800080; /* 文字色を変更 */
padding: 10px 20px;
border: 2px solid #800080;
border-radius: 0;
font-family: 'Courier New', monospace;
cursor: pointer;
box-shadow: 0 0 5px #800080;
}
✨ 未来的メタリック
どんなボタン？ メタリックでSFっぽいボタン！未来感たっぷりでクールなサイトに！
解説：CSSのlinear-gradientでメタリックな質感を再現！5色＋パープルで、シルバーの枠がポイント。色はbackgroundで変更できるよ！
.btn-metallic-red {
background: linear-gradient(45deg, #ff4444, #cc3333); /* グラデーション色を変更 */
color: #ffffff;
padding: 10px 20px; /* サイズを変更 */
border: 2px solid #999; /* 枠の色 */
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
box-shadow: 0 0 10px #999; /* 光の強さを変更 */
}
.btn-metallic-blue {
background: linear-gradient(45deg, #4444ff, #3333cc); /* グラデーション色を変更 */
color: #ffffff;
padding: 10px 20px;
border: 2px solid #999;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
box-shadow: 0 0 10px #999;
}
.btn-metallic-green {
background: linear-gradient(45deg, #44ff44, #33cc33); /* グラデーション色を変更 */
color: #000000;
padding: 10px 20px;
border: 2px solid #999;
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
box-shadow: 0 0 10px #999;
}
.btn-metallic-pink {
background: linear-gradient(45deg, #ff69b4, #cc5590); /* グラデーション色を変更 */
color: #ffffff;
padding: 10px 20px; /* サイズを変更 */
border: 2px solid #999; /* 枠の色 */
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
box-shadow: 0 0 10px #999; /* 光の強さを変更 */
}
.btn-metallic-yellow {
background: linear-gradient(45deg, #ffd700, #ccac00); /* グラデーション色を変更 */
color: #000000;
padding: 10px 20px; /* サイズを変更 */
border: 2px solid #999; /* 枠の色 */
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
box-shadow: 0 0 10px #999; /* 光の強さを変更 */
}
.btn-metallic-purple {
background: linear-gradient(45deg, #800080, #660066); /* グラデーション色を変更 */
color: #ffffff;
padding: 10px 20px; /* サイズを変更 */
border: 2px solid #999; /* 枠の色 */
border-radius: 5px;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
box-shadow: 0 0 10px #999; /* 光の強さを変更 */
}
✨ 設置方法
1. HTMLにボタンを貼る
ボタンのHTMLコード（例：<button class="btn-simple-red">赤</button>）をコピーして、サイトの好きな場所に貼り付けます。メニューやリンクに使うと可愛いよ！
2. CSSを追加
ボタンのCSSコードをコピーして、サイトの<style>タグ内やCSSファイルに貼り付けます。フォント（例：Orbitron）を使う場合は、Google Fontsのリンクも忘れずに！
Google Fontsのリンク例：
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet">3. カスタマイズ
色やサイズはCSSのコメント（例：/* 色を変更するにはここを編集 */）を参考に変更！アニメーションの速度や光の強さも調整して、オリジナルボタンを作っちゃおう！
4. テスト
サイトにボタンが正しく表示されるか、ホバーやクリックの動きを確認！問題があれば、CSSのプロパティ（例：backgroundやpadding）を微調整してね！
PR