CSS만 사용하여 버튼 텍스트 애니메이션

안녕, 안녕, 나마스테!

오늘 우리는 아래에서 볼 수 있는 것을 달성할 것입니다.



기본적으로 버튼 텍스트에 애니메이션을 적용하여 부드럽게 위아래로 움직이고 마우스를 가져가면 다른 텍스트를 표시합니다.

더 이상 고민하지 않고 들어가 보겠습니다.

1단계: html 구조 추가

버튼에 대해 두 가지 다른 텍스트 값이 필요하다는 것은 말할 필요도 없습니다.

기본 텍스트( New Blog )는 현재 정보를 보유하고 숨겨진 텍스트( Read it now! )는 버튼 가리키기에 표시된 값을 보유합니다.

지금까지 code은 다음과 같습니다.

<div class="btn blog-button">
  <div class="primary text">New Blog</div>
  <div class="secondary text">Read it now!</div>
</div>

.btn {
  width: 200px;
  height: 50px;
  background-color: #0fabbc;
  border-radius: 25px;
  color:#fff;
  font-size:18px;
  font-weight:bold;
  font-family: "Lucida Console", "Courier New", monospace;
}

2단계: 초기 상태(호버 없음)

지금은 두 텍스트 값이 작은 버튼 상자에 서로 쌓여 있습니다. position 속성을 사용하여 구분해 보겠습니다.

.btn {
  width: 180px;
  height: 45px;
  background-color: #0d7377;
  border-radius: 25px;
  position: relative;
}

.text {
  width: 180px;
  height: 45px;
  position: absolute;
}

.primary {
  top: 0px;
}

.secondary {
  top: 80px;
}

position: absolute; 를 사용하면 가장 가까운 위치에 있는 부모를 기준으로 위치가 지정됩니다. 위의 코드와 이미지를 보면 .btn에 상대 위치를 지정하고 자식 div를 절대 위치에 배치했습니다.

따라서 이제 하위 요소(.secondary and .primary)의 위치를 ​​변경하려고 할 때마다 본문이 아닌 .btn div와 관련하여 이동합니다.

### 3단계: 호버 상태

위의 코드를 보면 .secondary 클래스에 80px의 최고 값을 부여한 것을 알 수 있습니다. 호버에 표시되는 버튼 텍스트입니다. 버튼 위로 마우스를 가져가면 top 속성은 0이어야 버튼 상자 안에 위치합니다.

마찬가지로 이 시점에서 우리는 기존 텍스트("새 블로그")가 보조 텍스트를 위한 공간을 비워야 하므로 상단을 -80px로 설정하여 위로 이동합니다. 실제로 그것을 보자.

.btn:hover .primary {
  top:-80px
}

.btn:hover .secondary {
  top:0px
}

참조용으로 지금까지 사용된 전체code는 다음과 같습니다. 하지만 잠깐만요, 여기 빠진 게 있지 않나요?

오 예, 전환이 매우 매끄럽게 보이지 않습니다. 또한 다른 텍스트가 여전히 보이는 이유도 있습니다. 수정합시다.

4단계: 여기 저기에 약간의 애니메이션을 뿌립니다.

바로 지금 위아래로 미끄러지는 동작이 즉각적입니다. CSStransition 속성을 사용하여 이 슬라이드 업/다운 동작의 속도를 제어해 보겠습니다.

또한 원치 않는 텍스트를 제거할 시간입니다. .btn 클래스가 있는 버튼 상자 안에 있는 텍스트만 표시하고 싶으므로 overflow:hidden를 사용하여 해당 텍스트를 숨깁니다. 실제로 살펴보겠습니다.

.btn {
  overflow:hidden;
}

.text {
  transition: top 0.7s;
  -moz-transition: top 0.7s; // Firefox
  -webkit-transition: top 0.7s; // Safari and Chrome 
  -o-transition: top 0.7s; // Opera 
  -ms-transition: top 0.7s; // Explorer
}

위의 코드 스니펫은 이 섹션과 관련된 코드만 표시하도록 단순화되었습니다. 내가 사용한 모든 CSS 스타일에 대한 최종 코드here를 찾을 수 있습니다.

이것으로 이 글을 마칩니다. 이 버튼에 애니메이션을 적용하고 글을 쓰는 것이 즐거웠습니다. 나는 이것이 당신이 당신의 웹사이트에서 그것을 읽고 시도할 때 당신에게 같은 기쁨을 가져다주기를 바랍니다.

내 의견 섹션은 귀하의 피드백에 열려 있습니다. 트위터로 채팅하고 싶다면 저를 찾을 수 있습니다.

일반적인 요청으로 이 기사를 마무리합니다: 좋아요, 공유 및 댓글. 그것은 나에게 많은 것을 의미할 것입니다. 🙂🙂

다음 시간까지!