웹 프로젝트를 할 때 간단한 효과를 주기 위해 많이 사용했던 기술입니다.
자바스크립트를 사용해 효과를 줄 수 도 있지만 CSS를 사용해 간단히 수정했습니다.
hover 속성과 transition
hover는 사용자가 마우스를 올렸을 때, 효과를 주는 CSS의 한 기능이다. 여기에 transition을 사용하면 자연스러운 전환이 가능하게 된다.
transition은 원하는 요소의 시간을 지연시켜 애니메이션이 가능하도록 해준다.
transition의 속성 중 duration을 이용해 몇 초 동안 재생할 지 설정이 가능하다.
(webkit은 구글, 사파리 브라우저에 적용을 뜻함)
현재 블로그에서 사용한 코드..
.css
.area_menu .btn_cate
.area_menu .btn_cate:hover{ background-color:#000; color:#fff }
.html
<div class="area_menu">
<button type="button" class="btn_cate">
CATEGORY
</button>
</div>
+피드백은 언제나 환영입니다 :)
