グラデーションボタン

HTMLとCSSで構成されたグラデーションボタンです。

グラデーションボタンのデザインサンプル

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

Sample Text

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

• background-image: の部分をHEX（16進数）で変更すると背景の色が変わります
• color: の部分をHEX、RGB、色名などで指定することでテキストの色を変えられます
• ボタン選択時の色はfilter: brightness(***%);で明るしたりすることで変更可能です

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

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

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

HTMLの部分

<a href="ここにリンク先のURLを入れる" target="_blank" rel="noopener" class="gii_gradient_button">Sample Text</a>

CSSの部分

.gii_gradient_button {
    background-image: linear-gradient(to right, #1E5799, #7db9e8); /* グラデーションの指定 */
    border: none; /* 枠線なし */
    color: white; /* テキストの色 */
    padding: 0.5em 5em; /* パディング */
    font-size: 1rem; /* フォントサイズ */
    text-decoration: none; /* テキストの下線を消す */
    display: inline-block; /* インラインブロック要素として表示 */
    cursor: pointer; /* カーソルスタイル */
    transition: filter 0.3s; /* フィルター効果の変化を滑らかに */
}

.gii_gradient_button:hover {
    filter: brightness(135%); /* ホバー時に明るくする */
}

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

<style>
    .gii_gradient_button {
        background-image: linear-gradient(to right, #1E5799, #7db9e8);
        border: none;
        color: white;
        padding: 0.5em 5em;
        font-size: 1rem;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        transition: filter 0.3s;
    }

    .gii_gradient_button:hover {
        filter: brightness(135%);
    }
</style>

<a href="ここにリンク先のURLを入れる" target="_blank" rel="noopener" class="gii_gradient_button">Sample Text</a>

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

/* グラデーションボタンのスタイル */
.gii_gradient_button {
    background-image: linear-gradient(to right, #1E5799, #7db9e8);
    border: none;
    color: white;
    padding: 0.5em 5em;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: filter 0.3s;
}

/* ホバー時のスタイル */
.gii_gradient_button:hover {
    filter: brightness(135%);
}