CSS에서 릴리스 시 스타일 변경으로 버튼과 같은 효과를 만드는 방법은 무엇입니까?

누른 버튼 선택기

CSS에서는 :active 의사 클래스를 사용하여 현재 클릭하고 누르고 있는 요소의 스타일을 지정할 수 있습니다. 그러나 버튼의 스타일은 누르고 있는 동안에만 변경되므로 이 동작은 버튼에 적합하지 않습니다.

버튼을 눌렀다가 놓은 후에 버튼 스타일이 변경되는 원하는 효과를 얻으려면 다음을 사용할 수 있습니다. 버튼 대신 태그:

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>

HTML:

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

이 코드는 버튼처럼 작동하는 링크를 생성합니다. 링크를 클릭하면 스타일이 녹색으로 변경됩니다. 그런 다음 마우스 버튼을 놓으면 링크 스타일이 빨간색으로 변경됩니다.

위 내용은 CSS에서 릴리스 시 스타일 변경으로 버튼과 같은 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!