[CSS] 애니메이션 처음에 안보이게 가려주기 (animation-fill-mode속성), 버튼효과

완성된 버튼 효과

- 페이지 랜딩 시 밑에서 올라온다.

- 호버하면 버튼이 옆으로 퍼지고 위로 움직이면서 그림자가 생겨 입체적으로 보인다.

- 클릭하면 그림자가 사라지면서 눌리는 느낌이 든다.

 

버튼 효과

HTML 코드는 간단하게 a태그 넣어주었다.

<div>
  <a href="#" class="btn btn-white btn-animated">BRIBELLE</a>
</div>

 

CSS 에서 가장 중요한 건

animation-fill-mode: backwards;

이걸 넣어줌으로 버튼을 처음에 가려줄 수 있다.

 

.btn, .btn{
  text-decoration: none;
  background-color: #855c94;
  color: #fff;
  padding: 15px 40px;
  display: inline-block;
  border-radius: 50px;
  transition: all .2s;
  position: relative;
  animation: moveInBottom .5s ease-out .75s; //처음에 밑에서 올라오는 애니메이션
  animation-fill-mode: backwards;  //시작할 때 버튼 안보이게 하기
}

//처음에 밑에서 올라오는 애니메인션 - 키프레임
@keyframes moveInBottom {
  0%{opacity: 0; transform: translateY(30px);}
  100%{opacity: 1; transform: translate(0);}
}

//호버했을 때 입체효과
.btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

//클릭했을 때 눌리는효과
.btn:active{
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}


//호버시 퍼지는 효과
.btn:after{
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s;
  background-color: #855c94;
}

.btn:hover:after{
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}