CSS 를 활용한 버튼 테두리 애니메이션 튜토리얼

소개

이 랩에서는 CSS 를 사용하여 버튼 호버 시 테두리 애니메이션을 만드는 방법을 살펴봅니다. ::before 및 ::after 가상 요소 (pseudo-elements) 를 사용하여 버튼 위와 아래에 두 개의 상자를 추가하고 호버 시 너비를 100%로 전환할 수 있습니다. 이 랩은 CSS 기술을 향상시키고 웹 페이지에 상호 작용성을 추가하는 데 도움이 될 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

버튼 테두리 애니메이션

index.html 및 style.css는 이미 VM 에 제공되어 있습니다.

호버 시 테두리 애니메이션을 만들려면 ::before 및 ::after 가상 요소 (pseudo-elements) 를 사용하여 너비가 24px이고 상자 위와 아래에 위치한 두 개의 상자를 생성할 수 있습니다. 그런 다음 :hover 가상 클래스 (pseudo-class) 를 적용하여 호버 시 해당 요소의 width를 100%로 늘리고 transition을 사용하여 전환을 애니메이션화합니다.

다음은 예시 코드 조각입니다.

<button class="animated-border-button">Submit</button>

.animated-border-button {
  background-color: #263059;
  border: none;
  color: #ffffff;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
}

.animated-border-button::before,
.animated-border-button::after {
  border: 0 solid transparent;
  transition: all 0.3s;
  content: "";
  height: 0;
  position: absolute;
  width: 24px;
}

.animated-border-button::before {
  border-top: 2px solid #263059;
  right: 0;
  top: -4px;
}

.animated-border-button::after {
  border-bottom: 2px solid #263059;
  bottom: -4px;
  left: 0;
}

.animated-border-button:hover::before,
.animated-border-button:hover::after {
  width: 100%;
}

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 버튼 테두리 애니메이션 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.