如何建立具有三種不同狀態的按鈕：預設、懸停和啟動？

按下按鈕指示器

問題：

建立一個以可視方式切換其狀態的按鈕互動可能是使用者介面中的一個有用的功能。然而，提供的 CSS 僅在按鈕被主動按下時改變按鈕的樣式。預期的行為是具有三種不同的狀態：預設狀態、懸停狀態和啟動（按下）狀態。

答案：

當使用 < ;按鈕>標籤可能不會產生所需的輸出，值得探索使用 的替代方法。標籤。此解決方案提供類似的功能，並可能提供額外的靈活性：

<code class="css">a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}</code>

<code class="html"><a id="btn" href="#btn">Demo</a></code>

以上是如何建立具有三種不同狀態的按鈕：預設、懸停和啟動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！