ボタンのトグル機能を実装するためのCSSの方法

方法1: checkboxを使用する方法

HTML:
<input type="checkbox" id="toggle-btn">
<label for="toggle-btn">ボタン</label>
CSS:
#toggle-btn {
  display: none;
}
#toggle-btn + label {
  background-color: #ccc;
  padding: 10px;
  cursor: pointer;
}
#toggle-btn:checked + label {
  background-color: #f00;
}

方法2: JavaScriptを使用する方法

HTML:
<button id="toggle-btn">ボタン</button>
CSS:
#toggle-btn {
  background-color: #ccc;
  padding: 10px;
  cursor: pointer;
}
#toggle-btn.active {
  background-color: #f00;
}

方法3: CSSの:target疑似クラスを使用する方法

HTML:
<a href="#toggle-btn" id="toggle-link">ボタン</a>
<button id="toggle-btn">コンテンツ</button>
CSS:
#toggle-btn {
  display: none;
}
#toggle-btn:target {
  display: block;
}
#toggle-link {
  background-color: #ccc;
  padding: 10px;
  cursor: pointer;
}

これらの方法は、ボタンをクリックすることで状態をトグルすることができます。各方法にはそれぞれの利点と制限がありますので、必要に応じて適切な方法を選択してください。