【HTMLとCSSでボタンデザイン】クリックしたときにボタンが押される（へこむ）アクションを付ける方法

今回はボタンをクリックしたときに押される（凹む）アクションを付ける方法とその仕組みについて説明します。

以下のようなボタンです。
凹むボタン
WordPressでボタンを設置する方法については以前書いたので、参考にしてください。

※参考記事

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

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

大まかな流れ
ボタンを設置する
ボタンをデザインする
ボタンが押される（へこむ）仕組み
最後に

大まかな流れ

作業に移る前に全体像をはっきりさせておこうと思います。

投稿画面のテキストにhtml記述（ボタン設置）
スタイルシートにcss記述（ボタンデザイン）

の２段階となります。

コピペするだけで済むのでサラッと説明します。

ボタンを設置する

まずはボタンの元となるものを設置します。

まずはボタンを作ってみましょう。

WordPressの投稿画面でテキストエディタを選択します。

以下の様に記述します。

<a id="osareru" href="#">凹むボタン</a>

1	<a id="osareru" href="#">凹むボタン</a>

「凹むボタン」というテキストが表示されました。

ここからデザインをしていきます。

ボタンをデザインする

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

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

#osareru {
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: lightgreen;
    box-shadow: 0 5px 0 green;
    font-weight: bold;
    border-radius: 10px;
    margin: 10px auto;
    padding: 5px;
    user-select: none;
    cursor: pointer;
    text-decoration: none;
}
#osaeru:hover {
    opacity: 0.8;
}
#osareru:active {
    opacity: 0.5;
    margin-top: 14px;
    margin-bottom: 6px;
    box-shadow: 0 1px 0 green;
}

#osareru {

display: inline-block;

width: 100px;

height: 30px;

line-height: 30px;

text-align: center;

background: lightgreen;

box-shadow: 0 5px 0 green;

font-weight: bold;

border-radius: 10px;

margin: 10px auto;

padding: 5px;

user-select: none;

cursor: pointer;

text-decoration: none;

}

#osaeru:hover {

opacity: 0.8;

}

#osareru:active {

opacity: 0.5;

margin-top: 14px;

margin-bottom: 6px;

box-shadow: 0 1px 0 green;

}

ファイルを更新すれば作業は完了です。

実際にボタンが凹むか試してみてください。

※注意

ブラウザのキャッシュが残っているとボタンデザインが反映されない可能性があるので、シークレットモードで試すかキャッシュを消すかしてください。

また、投稿画面にコピペした以下のコードですが

<a id="osareru" href="#">凹むボタン</a>

1	<a id="osareru" href="#">凹むボタン</a>

href=”#”の　「#」の部分にリンク先を置き換えればボタンリンクの完成となります。

例えばhref=”https://www.google.co.jp/”てな具合です。

さらにリンク先を別タグで表示させたいときは以下の様にします。

<a id="osareru" href="#" target="_blank">凹むボタン</a>

1	<a id="osareru" href="#" target="_blank">凹むボタン</a>

Google

以上で凹むボタンの設置方法については終了です。

その仕組みについて説明するので、興味がある人は見ていってください。

ボタンが押される（へこむ）仕組み

ボタンが凹むのは、もちろんCSSを設定しているからなのですが、じゃあどのようなCSSを設定しているのかを簡単に説明しようと思います。

言葉だけだとわかりづらいので図解にします。（出てくる数値は例えばです。）

もともとボタンの上に１０ｐｘの空白をつくっておきます。

ボタンを押すと空白が１５ｐに増えるように設定します。

これをCSSで書くと「margin-top: 10px;」⇒「margin-top: 15px;」となります。

同時にボタンの影を消すCSSを書きます。

「box-shadow: none;」です。

ボタンのライトグリーン部分が影のグリーンの部分に移動したようになり、まるでボタンが押されたかのように見えるのです。

非常にわかりづらいかもしれませんが、上図で理解して頂ければと思います。

もっというとmargin-bottomも設定していて

もともと「margin-top: 10px;」だったのを「margin-top: 5px;」

にしています。

そうすることによってボタンより下にあるものすべてが移動するバグを直すことができます。

ちなみにクリックしたときにデザインの変化させるっていうのは

疑似要素の「:active」というものを使います。

押された時のデザインの記述が以下の部分です。

#osareru:active {
    opacity: 0.5;
    margin-top: 14px;
    margin-bottom: 6px;
    box-shadow: 0 1px 0 green;
}

#osareru:active {

opacity: 0.5;

margin-top: 14px;

margin-bottom: 6px;

box-shadow: 0 1px 0 green;

}

opacityってのは透明度。

margin-topが上の空間。

margin-bottomが下の空間。

box-shadowが影の設定です。

仕組みについては以上です。

最後に

長々と説明してきましたが、ボタン自体は簡単に設置できるので、もし興味があったらやってみてください。

実際に自分でコードを書いてみて色々試してみると、理解が深まると思います。

僕自身はhtmlやcssが好きなのでこの記事も楽しく書けましたし、あっという間に時間が過ぎました。

htmlとcssを勉強したい人がいたら以下の記事をどうぞ。

※参考記事

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

今日は以上です。