【HTMLとCSSでボタンデザイン】マウスをのせたときにボタンのデザインを変化させる方法

HTML&CSS

今回はマウスをのせたときにボタンのデザインを変化させる方法について書いていきます。

前回はWordPressにおいてボタンリンクを設置する方法を書いたのですが、それとは少し違う方法となります。

(⇒「【WordPressでボタンリンク設置】HTML&CSSを使ったボタンのつくり方(プラグインなしver.)」)

今回設置するものは以下のボタンです。
CLICK!

作業の流れ

ボタンデザインを変化させる作業の流れは以下です。

  1. 個別ページのテキストにHTMLボタンリンクを設置する。
  2. スタイルシートにCSSを書き込む

前回はボタンのデザインを個別ページのテキストのHTMLに直接書き込んでいましたが、今回は別のファイル(スタイルシート)に書き込みます。

 

個別ページにボタンリンクを設置する

ではさっそく始めます。

まずは個別ページのテキストに以下のコードを埋め込みます。

「CLICK!」の部分を変えれば、ボタンの文字内容について変える事が出来ます。

ただ、今の段階では全くデザインが付いていないです。

 

「class=”original-btn”」っていうのがデザインをつけるための印みたいなもので、これを使ってスタイルシートにデザインを書き込んでいきます。

 

スタイルシートにボタンリンクのデザインを書き込む

WordPressメニューの「外観」→「テーマ編集」とすすみ、「スタイルシート(style.css)」に書き込んでいきます。

ホントは子テーマというのを作成して書き込むのがベストなんですが、今回の変更はボタンリンクを追加するだけなので親テーマに直接書き込んでしまいます。

スタイルシート(style.css)」の一番最後の部分に以下のコードを貼り付けてください。

一つ一つのコードについては前回説明したので、今回は省きますが、ボタンを乗せたときの変化について書かれているのが「.original-btn:hover」ってところです。

original-btnという印が付いているタグにマウスがのった(hover)時のCSSです。

 

最後に

以上でマウスを乗せたときにボタンデザインが変化する方法でした。

ポイントは「hover」です。これさえ覚えておけば、どんどん応用できるでしょう。

おわりです。

 

ついでにこちらもどうぞ。

⇒「【Webサイトを作る・デザインする】HTML・CSSを勉強する方法!

 

コメント

  1. hidesert より:

    度々申し訳ありません。
    早速やってみたのですが、
    padding: 10px 30px;

    border: 8px solid #000;
    の部分が!マークになってしまい反映されません。
    全くデザインされていない状態です。
    色々数値を変えてみたりしたのですが、、、

    • kujigoji929 kujigoji929 より:

      テキストエディタで試してみたら表示できたので、コードは間違っていないようです。
      もしかしたらキャッシュが残っていて新しいデザインが反映されないのかもしれません。
      ブラウザのキャッシュを削除してみてください。
      又はシークレットモードで表示されるかもしれません。

      • hidesert より:

        ありがとうございます。
        外観−テーマのスタイルシートではなく
        VK ExUnitのCSSカスタマイズに載せたら反映されました。
        とりあえず、これでやってみます!ありがとうございます。