CSS 버튼 디자인 해보기

오늘은 CSS에서 마우스가 호버 될 시, 간단한 애니메이션과 함께 멋있는 버튼을 디자인해볼 것이다.

 

어떤 방식으로 버튼을 만들 거냐면 

이런 식으로 구성이 되어있고, 버튼에 호버가 될 때, span의 콘텐츠에 애니메이션을 주는 효과를 줄 것이다.

 

우선, className이랑 class랑 같다고 생각하자. (리액트로 예제를 해서 그렇다. 차이는 없다)

그렇게 하면 

이런 버튼이 생길 것이다.

이제 간단한 버튼 디자인을 해보자.

 

 

이런 식으로 해주었다.

 

 

button안에 span값은 

마우스가 올라갔을 때 pointer속성을 주었고,

display : inline-block을 주게 되면 :after가상 클래스가 span값 옆에 생기게 된다. 

position: relative는 위치 조정을 위해서,

transition은 애니메이션 시간을 명시해주었다.

 

이제 이렇게 해서

 

이렇게 :after라는 속성을 줬는데 

span이라는 태그 마지막에 붙는 가상 클래스이다.

content는 가상 클래스 값이고, \00bb의 값은 화살표이다.

position: absolute를 주게 되면 문서의 흐름에서 after의 값이 영향을 받지 않는다.

opacity:0을 해주게 되면 보이지 않게 된다. 반대로 opacity:1은 보이게 된다.

top : 0; right : -20px;을 해서 위치 값을 조정해주었다.

transition으로 animation시간을 조정해주었고

 

buton이 hover가 되었을 때 span에서 padding-right: 25px;이라는 값을 주게 되면,

span의 값이 왼쪽으로 가게 되는 효과가 있다.

 

그렇게 해서 버튼 애니메이션을 보면 잘 작동할 것이다...

 

이제 ::after의 content가 보여야 할 일만 남았다..!

 

이제 보면 정말 멋있는 애니메이션이 보일 것이다.

 

그럼 뿅