1. ホーム
  2. html

[解決済み] CSSでクリックされたボタンをスタイルする方法 [重複]について

2022-03-01 14:05:32

質問

W3スクールのホームページを見てみました W3Schools では、CSSによるボタンのスタイリングが説明されています。ボタンがクリックされたときのスタイルを指定する必要があります。そのための擬似クラスセレクタは何ですか? 例:ホバーボタンは。

.button:hover{ 
}

解決方法は?

このボタンは、初期状態では黄色で表示されます。カーソルを合わせるとオレンジ色に変わります。クリックすると赤くなります。スタイルを合わせるために、:hoverと:focusを使っています。 (通常、:active セレクタはリンク(例. <a> タグ)

button{
  background-color:yellow;
}

button:hover{background-color:orange;}

button:focus{background-color:red;}

a {
  color: orange;
}

a.button{
  color:green;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:active {
  color: blue;
}
<button>
Hover and Click!
</button>
<br><br>

<a href="#">Hello</a><br><br>
<a class="button" href="#">Bye</a>