【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を勉強する方法！」