【コピペで使える】【コピペで使える】CSSボタンジェネレーター | ホームページパーツ

パーツ一覧 >ツール > 【コピペで使える】CSSボタンジェネレーター

【コピペで使える】CSSボタンジェネレーター

ボタンのデザイン、もう迷わない

Webサイトにおいて、ユーザーに次の行動を促す「ボタン」は非常に重要なパーツです。「資料請求する」「購入する」「問い合わせる」など、訪問者をゴールに導く役割を担います。

しかし、見栄えが良く、かつクリックしたくなるようなボタンをCSSで一から作るのは意外と手間がかかるものです。

そこで、誰でも簡単に理想のボタンを作成できる「CSSボタンジェネレーター」を開発しました。

CSSボタンジェネレーター

以下のツールで、テキスト、色、形などを自由にカスタマイズしてみてください。プレビューで確認しながら、リアルタイムでHTMLとCSSのコードが生成されます。コードはワンクリックでコピーして、あなたのサイトにすぐに貼り付けられます。

ボタン生成ツールを使ってみる

このツールのソースコード

このツール自体も、基本的なHTML、CSS、JavaScriptで作成されています。「自分のサイトに、このツール自体を設置したい」という方は、以下のコードをコピーしてご利用ください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSボタンジェネレーター</title>
    <style>
        /* CSS in the next block */
    </style>
</head>
<body>

<div class="container">
    <h1>CSSボタンジェネレーター</h1>
    <div class="main-content">
        <div class="controls">
            <!-- Controls like text input, color pickers, etc. -->
        </div>
        <div class="preview-section">
            <div class="preview-box">
                <button class="generated-button" id="previewButton">クリック！</button>
            </div>
            <div class="code-section">
                <button class="copy-button" id="copyButton">コードをコピー</button>
                <div class="code-box" id="codeBox">
                    <!-- Generated code will appear here -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // JavaScript in the block below
</script>

</body>
</html>
免責事項: 本コードを利用したことによって生じたいかなる損害についても、当サイトは一切の責任を負いません。自己責任の上でご利用ください。

CSS

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 800px;
}
h1 {
    text-align: center;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 30px;
}
.main-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
}
.controls {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}
.control-group {
    margin-bottom: 20px;
}
.control-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #555;
}
.control-group input[type="text"],
.control-group input[type="color"],
.control-group input[type="range"],
.control-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.control-group input[type="range"] {
    padding: 0;
}
.preview-section {
    display: flex;
    flex-direction: column;
}
.preview-box {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e9ecef;
    padding: 40px;
    border-radius: 8px;
    min-height: 150px;
    margin-bottom: 20px;
}
.generated-button {
    padding: 15px 30px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.code-section {
    position: relative;
}
.code-box {
    background-color: #2c3e50;
    color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
}
.copy-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #3498db;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.copy-button:hover {
    background-color: #2980b9;
}
.copy-button:active {
    transform: translateY(1px);
}
.range-value {
    font-weight: normal;
    color: #777;
}
免責事項: 本コードを利用したことによって生じたいかなる損害についても、当サイトは一切の責任を負いません。自己責任の上でご利用ください。

JavaScript

    const controls = {
        buttonText: document.getElementById('buttonText'),
        bgColor: document.getElementById('bgColor'),
        textColor: document.getElementById('textColor'),
        fontSize: document.getElementById('fontSize'),
        borderRadius: document.getElementById('borderRadius'),
        paddingV: document.getElementById('paddingV'),
        paddingH: document.getElementById('paddingH'),
        boxShadow: document.getElementById('boxShadow'),
        shadowX: document.getElementById('shadowX'),
        shadowY: document.getElementById('shadowY'),
        shadowBlur: document.getElementById('shadowBlur'),
        shadowColor: document.getElementById('shadowColor'),
        shadowOpacity: document.getElementById('shadowOpacity'),
    };

    const previewButton = document.getElementById('previewButton');
    const codeBox = document.getElementById('codeBox');
    const copyButton = document.getElementById('copyButton');
    const downloadButton = document.getElementById('downloadButton');
    const shadowControlsContainer = document.getElementById('shadow-controls');

    function hexToRgba(hex, alpha) {
        const r = parseInt(hex.slice(1, 3), 16);
        const g = parseInt(hex.slice(3, 5), 16);
        const b = parseInt(hex.slice(5, 7), 16);
        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    }

    function getFullHtmlContent() {
        const cssCode = codeBox.innerText.split('<style>')[1].split('</style>')[0].trim();
        const htmlBody = codeBox.innerText.split('<!-- HTML -->')[1].split('<!-- CSS -->')[0].trim();

        return `<!DOCTYPE html>\n<html lang="ja">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Generated Button</title>\n    <style>\n        body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; }\n        ${cssCode}\n    </style>\n</head>\n<body>\n    ${htmlBody}\n</body>\n</html>`;
    }

    function updateButton() {
        // Update preview button text
        previewButton.innerText = controls.buttonText.value;

        // Update preview button styles
        const bgColor = controls.bgColor.value;
        const textColor = controls.textColor.value;
        const fontSize = controls.fontSize.value + 'px';
        const borderRadius = controls.borderRadius.value + 'px';
        const padding = controls.paddingV.value + 'px ' + controls.paddingH.value + 'px';
        
        let boxShadowValue = 'none';
        if (controls.boxShadow.checked) {
            const shadowX = controls.shadowX.value + 'px';
            const shadowY = controls.shadowY.value + 'px';
            const shadowBlur = controls.shadowBlur.value + 'px';
            const shadowColor = hexToRgba(controls.shadowColor.value, controls.shadowOpacity.value);
            boxShadowValue = `${shadowX} ${shadowY} ${shadowBlur} ${shadowColor}`;
        }

        previewButton.style.backgroundColor = bgColor;
        previewButton.style.color = textColor;
        previewButton.style.fontSize = fontSize;
        previewButton.style.borderRadius = borderRadius;
        previewButton.style.padding = padding;
        previewButton.style.boxShadow = boxShadowValue;
        
        // Update range value displays
        document.querySelector('label[for="fontSize"] .range-value').textContent = `(${fontSize})`;
        document.querySelector('label[for="borderRadius"] .range-value').textContent = `(${borderRadius})`;
        document.querySelector('label[for="paddingV"] .range-value').textContent = `(${controls.paddingV.value}px)`;
        document.querySelector('label[for="paddingH"] .range-value').textContent = `(${controls.paddingH.value}px)`;
        document.querySelector('label[for="shadowX"] .range-value').textContent = `(${controls.shadowX.value}px)`;
        document.querySelector('label[for="shadowY"] .range-value').textContent = `(${controls.shadowY.value}px)`;
        document.querySelector('label[for="shadowBlur"] .range-value').textContent = `(${controls.shadowBlur.value}px)`;
        document.querySelector('label[for="shadowOpacity"] .range-value').textContent = `(${controls.shadowOpacity.value})`;

        // Generate and display code
        const cssCode = `\n.custom-button {\n    background-color: ${bgColor};\n    color: ${textColor};\n    font-size: ${fontSize};\n    border-radius: ${borderRadius};\n    padding: ${padding};\n    border: none;\n    cursor: pointer;\n    box-shadow: ${boxShadowValue};\n    transition: all 0.3s ease;\n}\n\n.custom-button:hover {\n    opacity: 0.9;\n    transform: translateY(-2px);\n}\n        `;
        const htmlCode = `<button class="custom-button">${controls.buttonText.value}</button>`;

        codeBox.innerText = `<!-- HTML -->\n${htmlCode}\n\n<!-- CSS -->\n<style>\n${cssCode.trim()}\n</style>`;
    }

    function toggleShadowControls() {
        shadowControlsContainer.classList.toggle('hidden', !controls.boxShadow.checked);
    }

    // Add event listeners to all controls
    for (const key in controls) {
        controls[key].addEventListener('input', updateButton);
    }

    controls.boxShadow.addEventListener('change', toggleShadowControls);

    // Copy to clipboard
    copyButton.addEventListener('click', () => {
        navigator.clipboard.writeText(codeBox.innerText).then(() => {
            copyButton.innerText = 'コピー完了！';
            setTimeout(() => {
                copyButton.innerText = 'コードをコピー';
            }, 2000);
        }, (err) => {
            console.error('Could not copy text: ', err);
            alert('コピーに失敗しました。');
        });
    });

    // Download as HTML file
    downloadButton.addEventListener('click', () => {
        const fullHtml = getFullHtmlContent();
        const blob = new Blob([fullHtml], { type: 'text/html' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'button.html';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    });

    // Initial call to set everything up
    updateButton();
    toggleShadowControls();
免責事項: 本コードを利用したことによって生じたいかなる損害についても、当サイトは一切の責任を負いません。自己責任の上でご利用ください。

導入でお困りですか？

専門家による導入サポート（有料）も承っております。お気軽にご相談ください。

お問い合わせはこちら