シンプルボタン

ボタンデザインWebサイトのカバーイメージ

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

目次

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

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

Sample Text
CSSのプロパティと値を解説した画像
CSSのプロパティと値を解説した画像|作成:ユニコブログ®︎

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

  • 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; /* ホバー時の背景色 */
}

基本的にプロが開発したWebサイトのデザインテーマ利用を推奨します

当サイトのトップページに記載した通り、運用しているWebメディアがサイト型、ブログ型など、使い方は様々だと思うのですが、特に、商用として運用する場合は、やはりプロが開発したWebサイトデザインのテーマを利用して、その中で使えるボタンデザインを選択することをオススメします。

サイト全体のデザインも崩れにくく、統一性が保てることは重要な要素になります。

筆者の場合、新しいWebサイト開設するときはフロント部分のCMSにはWordPressを使用し、特に、通常のサイト型Webメディアや、ブログ型Webサイトの場合は、使用するレンタルサーバーもWordPressテーマも、ほとんど固定化されてきています。

検証用途で新しいレンタルサーバーサービスやWordPressテーマを使うことも多々ありますが、利用するものは運用する体制による使い分けはあるもののだいぶ決まってきました。

筆者がよく利用しているWebサイトの運営状況に関して、下記の関連記事が参考になれば幸いです。

今後も、色々と試しながら一生懸命に作っています。

何卒よろしくお願いいたします。

  • URLをコピーしました!

この記事を書いた人

HTML、CSS、JavaScript等の色々なプログラミング言語で色々なものを作って試しています。

よろしくお願いいたします。

目次