목차 Show
버튼 기본스타일 (Button Basic Styling)
※ 버튼은 <a> , <button> , <input> 요소로 제작 가능. 버튼 색깔 (Button Color)
※ 버튼색깔: background 속성 이용 버튼 크기 (Button Size)
버튼 모서리 둥글게 (Rounded Button)
※ 둥근모서리 : border-radius 속성 이용 버튼 허버 (Button Hover)
※ 버튼허버: transition-duration 속성 및 :hover 선택자 이용. 버튼 그림자/음영 (Shadow Button)
※ 버튼그림자 : box-shadow 속성 이용. 버튼 비활성화/클릭방지 (Disabled Button)
버튼클릭방지: cursor:not-allowed 속성(값) 이용. 버튼 그룹 수평 배치 - 왼쪽 배치
※ 버튼그룹: 각 버튼 요소의 margin 제거 후, float:left 속성 추가. ※ 버튼 테두리는 border 속성 이용. ※ padding으로 버튼크기 조절 시, (한글메뉴, 영어메뉴) 높이가 안 맞는 문제 생김. height값 꼭 줄 것. 버튼 그룹 수평 배치 - 균등 배분
버튼 그룹 수직 배치
※ 각 버튼 요소에서 float:left 속성 제거 후, display:block 속성 추가. 버튼 이미지 위에 배치 (Button on Image)
버튼 허버 시 서브요소 노출 (Arrow Effect)
버튼 허버/클릭 시 배경색 변경
버튼 서서히 진하게/흐르게 (Fade in Effect)
※ 서서히진하게 (=서서히흐리게) : opacity 속성 이용 버튼 클릭 시 잔물결 효과 (Wave Effect)
|