[CSS] 버튼에 animation 적용하기

요즘 나오는 UI 프레임워크들이 너무 잘 되어있어서 간단히 button만 가져다 쓰면 애니메이션도 들어가져 있고 이쁘게 해 줘서 그거 쓰면 됩니다.

 

그래도 어떻게 구현되어 있는지 안 까보셨죠?? 

제가 정리해 봤습니다. 

---

| button에 물결 animation 적용하기

<button class="btn-wave">물결 버튼</button>

 

html에 버튼 놓는거야 기본이니깐 저렇게 두고요. css만 좀 잡아줍니다.

.btn-wave {
  position: relative;
  padding: 10px 20px;
  background-color: #c00402;
  color: white;
  border: none;
  cursor: pointer;
  overflow: hidden;
}

.btn-wave::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease-out, height 0.5s ease-out, opacity 0.5s ease-out;
}

.btn-wave:hover::before {
  width: 200px;
  height: 200px;
  opacity: 1;
}

 

 

그래서 이거 작업한김에 어?! 괜찮네 싶어서 제 티스토리 댓글 등록 버튼에 스타일을 입혔어요.

어때요? 괜찮나요? ㅎㅎ

| svg 버튼에 animation 적용하기

svg를 가지고 버튼에 적용해서 좀 더 이쁘게 그릴 수 있지 않을까 해서 버튼에 svg 애니메이션을 적용해 봤습니다.

 

html 코드는 이렇구요. 버튼 안으로 svg가 들어가게 됩니다. 

<button class="btn-svg">
    <svg height="36" width="120">
        <rect height="36" width="120"></rect>
    </svg>
    <span class="btn-text">버튼</span>
</button>

 

svg에 stroke가 구멍이 뚫린 스타일로 잡아주고 버튼에 :hover 됐을 때 stroke-dashoffset을 -110%만큼 이동시키겠습니다.

.btn-svg { 
  position:relative; 
  height:36px;  
  padding: 0; 
  border:0; 
  background:transparent;
}
.btn-svg svg rect{ 
  fill:transparent; 
  stroke: #ffd24d; 
  stroke-width:2px; 
  stroke-dashoffset:240%; 
  stroke-dasharray: 330% 18; 
  transition: 2s;
} 
.btn-svg:hover svg rect { 
  stroke-dashoffset: -110% !important 
} 
.btn-svg .btn-text{ 
  position: absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  color: #525252; 
  line-height: 36px; 
}

 

그러면 어떻게 될까요??

티스토리 에디터에서는 svg가 태그로 들어가질 않네요. 

XSS를 막기 위함인 거 같은데 왜 svg를 ㅠ

그래서 움짤로 대신합니다. 마우스를 hover 했을 때 svg의 스트로크가 움직여요.

버튼에 걸려있는 animation

 

이야!! 디자인이 필요하겠어요. 역시 개발자가 아무리 이쁘게 한다고 해도 구리.... 네요.

뭐 이런 방법도 있다는 것만 알아주세요.

 

그럼 간단한 포스팅 마칠게요. 감사합니다. ^___^