CSSボタンデザイン集 WEB制作
73種類の現役プロダクト級CSSボタンデザインからクリックで選択→ライブプレビュー→コード即コピー。シャイン・リップル・ニューモーフィズム・グラスモーフィズム・3Dプッシュ等のトレンドデザイン搭載。文字色・色・サイズを自由調整。HTML/CSS・Tailwind・Bootstrap・Material 3の4形式に対応。
No.1 フラット (選択中)
↓ デザインをクリックして変更
※ HTML/CSS: フレームワーク不要・どこでも動くコード。
npm install tailwindcss@next または CDN <script src="https://cdn.tailwindcss.com"></script> が必要。カスタム色はbg-[#hex]で表現。',
'bootstrap': '※ Bootstrap 5: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> を読込。配色は追加CSSで上書きが必要。',
'material': '※ Material 3: Web Components @material/web 必要。<script type="module" src="https://esm.run/@material/web/all.js"></script>',
};
function updateCode() {
var c = getConfig();
var design = DESIGNS.find(function (d) { return d.id === selectedId; });
if (!design) return;
var output;
if (currentMTab === 'tailwind') {
output = buildTailwindCode(design, c);
} else if (currentMTab === 'bootstrap') {
output = buildBootstrapCode(design, c);
} else if (currentMTab === 'material') {
output = buildMaterialCode(design, c);
} else {
// 既定: HTML/CSS (素のCSS)
var userCls = 'btn-' + design.id;
var css = design.css(c.main, c.sub, userCls, c.size, c.radius, c.txt);
var htmlStr = '';
output = '\n' + htmlStr + '\n\n\n';
}
document.getElementById('selected-code').textContent = output;
// FW説明文を更新
var noteEl = document.getElementById('bd-fw-note');
if (noteEl) noteEl.innerHTML = FW_NOTES[currentMTab] || '';
}
document.querySelectorAll('.bd-selected-tab').forEach(function (b) {
b.addEventListener('click', function () {
document.querySelectorAll('.bd-selected-tab').forEach(function (x) { x.classList.remove('active'); });
b.classList.add('active');
currentMTab = b.dataset.mtab;
updateCode();
});
});
document.getElementById('copy-btn').addEventListener('click', function () {
var txt = document.getElementById('selected-code').textContent;
navigator.clipboard.writeText(txt).then(function () {
var b = document.getElementById('copy-btn');
var orig = b.textContent;
b.textContent = '✓ コピー済';
setTimeout(function () { b.textContent = orig; }, 1500);
});
});
document.querySelectorAll('.bd-filter-btn').forEach(function (b) {
b.addEventListener('click', function () {
document.querySelectorAll('.bd-filter-btn').forEach(function (x) { x.classList.remove('active'); });
b.classList.add('active');
currentFilter = b.dataset.cat;
renderGrid();
});
});
['text', 'text-color', 'main-color', 'sub-color', 'size', 'radius'].forEach(function (id) {
var el = document.getElementById(id);
var fn = function () { renderGrid(); renderSelected(); };
el.addEventListener('input', fn);
el.addEventListener('change', fn);
});
renderGrid();
renderSelected();
})();