HTML , CSS 로 버튼 만들기 2!!

HTML , CSS 로 버튼 만들기 2!!

움직이는 버튼 만들기!

처음에 포스팅했던 버튼 만들기.

https://covelope.tistory.com/entry/HTML-CSS-%EB%A1%9C-%EB%B2%84%ED%8A%BC-%EB%A7%8C%EB%93%A4%EA%B8%B0

animation과 다양한 속성들 활용.

여기서 만들었던 방법에서 animation 과 skew 등 다른 추가적인 속성들 이용해서 다른 디자인에 버튼 두 가지를 더 만들었다. 처음 포스팅했던 때와 같이 Js를 사용하면 훨씬 더 무궁무진한 디자인이 가능하겠지만 일단은 아는 한도 내에서도 머리만 잘 쓰면 충분히 좋은 디자인을 만들 수 있을 거 같다.

아래 버튼은 간단한 animation을 이용해서 만들었다. 호버 되었을 때 안녕이라는 콘텐츠는 가상 요소 before 를 사용해서 만들었고 작아지고 커지고 퍼져나가는 임펙트는 animation 을 활용하였다.

transform 과 가상 요소

transform 의 skew 과 가상 요소(::before , ::after)를 활용한 버튼 약간 유리 같은 매끈한 느낌으로 만들고 싶어서 2개의 가상 요소를 만들고 시간대와 background 색상을 다르게 줘서 만들었다.

코드는 github에 올려놓았다.

https://github.com/chry8822/front_end_like_lion_learning/tree/main/Button

from http://covelope.tistory.com/19 by ccl(A) rewrite - 2021-11-13 16:28:02