Buttons

버튼은 사용자에게 직관적으로 상호작용을 컨트롤 하게 하는 기본적인 요소입니다. 서비스 내에서 가이드 없이 혼용하여 사용하지 말도록 하고, 상황에 맞는 버튼을 사용할 수 있도록 가이드를 만들어 지키도록 합니다. 버튼의 컬러는 클릭이 가능하고 실행이 된다는 표시입니다. 사용자의 혼란을 방지하기 위해 버튼에서 사용된 컬러를 컨텐츠에서 사용하지 않도록 주의 합니다. (버튼의 라운드(R)값 및 컬러등은 변경하여 사용가능합니다.)

<button padding>

1. Button

버튼은 solid, line, text, icon 형태의 버튼을 상황별로 구분하여 사용하도록 합니다.

style	_disabled	_normal	_hover
solid
line
icon
text

_hover text style : white opacity 50%

HTML

CSS

2. Radio / Check Box / Switch

체크박스와 라디오 버튼은 형태를 구분지어 사용하는것을 권장합니다. 체크박스와 라디오 버튼이 같은 형태로 사용될 경우 사용자에게 혼란을 줄 수 있습니다. (ex_같은 원형 사용 지양)

style	_disabled	_off	_on
radio
check box
switch	-

HTML

CSS

3. Etc

컬러는 각 서비스의 primary 컬러를 사용하도록 하고, 각 버튼 스타일의 통일성은 유지하도록 권장합니다.

style	_disabled	normal	hover
floating	-
pagination