ボタンが押されたときに凹んだようにみせるCSS

初歩中の初歩ですが、HTMLとCSSだけで、ボタンがマウスで押下されたときに,凹んだようにみえるように編集してみた。

必要なもの

• ボタン本体のHTML
• 何もアクションがない時のボタンのCSS
• ボタンにマウスカーソルが置かれた時のCSS
• ボタンが押下された時のCSS

HTML

buttonタグを使用します。

<button type="submit" name="submit_button" class="contact_button">送信</button>

CSS

何もアクションがない時のボタンのデザイン

.contact_button{
  display: block;
  background: #aacf53; /* 緑色 */
  color: #fff;
  border: solid 4px #aacf53; /* 緑色 */
  font-size: 1.4em;
  border-radius: 5px;
}

ボタンにマウスカーソルが置かれた時のデザイン

.contact_button:hover{
  background: #82ae46; /* 少し濃い緑色 */
  border: solid 4px #82ae46; /* 少し濃い緑色 */
}

ボタンが押下された時のでデザイン

.contact_button:active{
  background: #69821b; /* 濃い緑色 */
}

まとめ

ボタンにマウスカーソルが置かれたときのデザインを:hover、ボタンが押下された時のデザインを:activeの擬似クラスを使用することで実現することができる。
凹んだときのボタンの色を設定するポイントは、backgroundよりborderの色を明るい色に設定すること。