250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- react
- 모던 자바스크립트
- function
- 함수
- var
- 투두리스트
- VUE
- 데이터 타입
- Interface
- 모던
- this
- const
- js
- 뷰
- todolist
- 타입스크립트
- CSS
- ES6
- BIND
- 자바스크립트
- typescript
- 리액트
- 라우터
- Number
- let
- 스코프
- redux
- 객체
- null
- 컴포넌트
Archives
- Today
- Total
목록애니메이션 (1)
홍준혁
CSS 버튼 디자인 해보기
오늘은 CSS에서 마우스가 호버 될 시, 간단한 애니메이션과 함께 멋있는 버튼을 디자인해볼 것이다. 어떤 방식으로 버튼을 만들 거냐면 이런 식으로 구성이 되어있고, 버튼에 호버가 될 때, span의 콘텐츠에 애니메이션을 주는 효과를 줄 것이다. 우선, className이랑 class랑 같다고 생각하자. (리액트로 예제를 해서 그렇다. 차이는 없다) 그렇게 하면 이런 버튼이 생길 것이다. 이제 간단한 버튼 디자인을 해보자. 이런 식으로 해주었다. button안에 span값은 마우스가 올라갔을 때 pointer속성을 주었고, display : inline-block을 주게 되면 :after가상 클래스가 span값 옆에 생기게 된다. position: relative는 위치 조정을 위해서, transition..
CSS
2021. 1. 28. 21:13