HTML 숨겨진 버튼: CSS를 사용하여 버튼 숨기기 및 표시

웹 개발에서 버튼을 숨기는 것은 매우 일반적인 요구 사항입니다. 때로는 페이지 공간을 항상 차지하는 대신 일부 작업 항목을 숨기고 필요할 때 표시해야 하는 경우도 있습니다. 이 경우 CSS를 사용하여 버튼을 숨기거나 표시할 수 있습니다.

이를 달성하는 방법은 다음과 같습니다.

1. HTML에 "숨기기 버튼" 태그를 추가합니다

<button class="hide-btn">隐藏按钮</button>

2. CSS를 사용하여 버튼의 스타일과 속성을 설정합니다.

.hide-btn {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  cursor: pointer;
}

위의 CSS 코드는 버튼의 페이지 위치 추가로 너비, 높이, 투명도 및 마우스 포인터 스타일도 설정됩니다. 이러한 속성을 사용하면 페이지에서는 버튼이 보이지 않지만 클릭할 수는 있습니다.

3. 버튼을 표시하는 컨트롤러 만들기

<button class="show-btn">显示按钮</button>

이 버튼은 사용자가 클릭할 수 있으며, 사용자가 클릭하면 "숨겨진 버튼" 라벨이 표시됩니다.

4. 컨트롤러의 스타일과 동작 설정

.show-btn {
  cursor: pointer;
}

var hideBtn = document.querySelector('.hide-btn');
var showBtn = document.querySelector('.show-btn');

showBtn.addEventListener('click', function() {
  hideBtn.style.position = 'static';
});

여기서 사용자가 컨트롤러 버튼을 클릭하면 "숨겨진 버튼" 라벨의 ​​위치를 ​​정적으로 설정하여 해당 버튼이 나타나도록 합니다. 페이지가 올라왔습니다.

5. 애니메이션 효과 추가(선택 사항)

이 버튼의 표시 및 사라지기를 더 부드럽게 만들고 싶다면 CSS 애니메이션 효과를 사용할 수 있습니다. 예를 들어, 사용자가 "버튼 표시"를 클릭하면 "버튼 숨기기" 레이블이 페이드 인 방식으로 표시되도록 합니다.

.hide-btn {
  ...
  transition: opacity 1s;
}

.hide-btn.visible {
  opacity: 1;
}

showBtn.addEventListener('click', function() {
  hideBtn.classList.add('visible');
});

여기에서는 CSS 전환 속성을 사용하여 한 불투명도 값에서 다른 불투명도 값으로의 전환 효과를 설정합니다. . 동시에, 사용자가 "Show Button"을 클릭하면 이를 "Hide Button" 라벨에 추가하여 CSS에서 전환 효과를 실행합니다.

요약

CSS를 사용하여 버튼을 숨기고 표시하는 것은 매우 간단합니다. 페이지 외부에서 "숨겨진 버튼" 라벨의 ​​위치를 ​​설정한 다음 컨트롤러를 사용하여 위치를 변경하거나 CSS 애니메이션 효과를 사용하여 라벨이 더 원활하게 나타나고 사라지도록 하기만 하면 됩니다. 이 방법은 편리하고 실용적일 뿐만 아니라 페이지 성능과 로딩 속도에 영향을 주지 않습니다.

위 내용은 HTML 숨겨진 버튼: CSS를 사용하여 버튼 숨기기 및 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!