シンプルボタン

HTMLとCSSで構成されたシンプルなボタンです。

シンプルボタンのデザインサンプル

ボタンのリンク先はGoogle検索セントラルのTopページになっていますが、サンプルコードの方は、URLが記入されていないので、使ってもらえるときにはHTMLとCSSのプロパティや値の変更で色々と試すときに書き換えてください。

Sample Text

基本的な変更要素のガイド

• background-color: の部分をHEX（16進数）で変更すると背景の色が変わります
• color: の部分をHEX、RGB、色名などで指定することでテキストの色を変えられます
• ボタン選択時:hover,の色もHEX、RGB、色名など指定することで変更可能です

色のコードを確認しながら変更を加えていきたい場合は、Googleのカラー選択ツールを利用すると色の勉強にもなるので便利です。

また、各ボタンデザインの表記形式の利害などについては、当サイトのトップページに記載しております。

シンプルボタンのHTMLとCSSが分かれたもの

HTMLの部分

<a href="ここにリンク先のURLを入れる" target="_blank" rel="noopener" class="gii_simple_button">リンク先のテキストを入れる</a>

CSSの部分

.gii_simple_button {
    background-color: #0000ee; /* ボタンの背景色 */
    border: none; /* 枠線なし */
    color: white; /* テキストの色 */
    padding: 0.5em 5em; /* パディング */
    font-size: 1rem; /* フォントサイズ */
    text-decoration: none; /* テキストの下線を消す */
    display: inline-block; /* ブロック要素のように振る舞う */
    cursor: pointer; /* カーソルスタイル */
    transition: background-color 0.3s; /* 背景色の変化を滑らかに */
}

.gii_simple_button:hover, .gii_simple_button:focus {
    background-color: #3333ff; /* ホバー時の背景色 */
}

WordPressで1つのHTMLカスタムブロック内に記述した場合

<a href="ここにリンク先のURLを入れる" class="gii_simple_button">リンク先のテキストを入れる</a>

<style>
    .gii_simple_button {
        background-color: #0000ee; /* ボタンの背景色 */
        border: none; /* 枠線なし */
        color: white; /* テキストの色 */
        padding: 0.5em 5em; /* パディング */
        font-size: 1rem; /* フォントサイズ */
        text-decoration: none; /* テキストの下線を消す */
        display: inline-block; /* ブロック要素のように振る舞う */
        cursor: pointer; /* カーソルスタイル */
        transition: background-color 0.3s; /* 背景色の変化を滑らかに */
    }

    .gii_simple_button:hover, .gii_simple_button:focus {
        background-color: #3333ff; /* ホバー時の背景色 */
    }
</style>

WordPressの「カスタマイズCSS」や「追加CSS」で全体に適用するCSS

.gii_simple_button {
    background-color: #0000ee; /* ボタンの背景色 */
    border: none; /* 枠線なし */
    color: white; /* テキストの色 */
    padding: 0.5em 5em; /* パディング */
    font-size: 1rem; /* フォントサイズ */
    text-decoration: none; /* テキストの下線を消す */
    display: inline-block; /* ブロック要素のように振る舞う */
    cursor: pointer; /* カーソルスタイル */
    transition: background-color 0.3s; /* 背景色の変化を滑らかに */
}

.gii_simple_button:hover, .gii_simple_button:focus {
    background-color: #3333ff; /* ホバー時の背景色 */
}