기본, 호버, 활성화의 세 가지 상태를 갖는 버튼을 만드는 방법은 무엇입니까?

눌린 버튼 표시기

질문:

상태를 시각적으로 전환하는 버튼 만들기 상호작용은 사용자 인터페이스에서 유용한 기능이 될 수 있습니다. 그러나 제공된 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!