MENU
각 버튼 타입별로 나열하였다. 기본 솔리드버튼, 아웃라인 버튼, a태그를 사용한버튼 (a태그를 사용해도 버튼 클래스를 추가하면 동일하게 스타일 적용), 라운드 버튼, 아이콘과 텍스트 조합버튼, 아이콘만을 사용한 버튼등이 있다.
<button type="button" class="btn btn--primary">JAY DESIGN</button> <button type="button" class="btn btn--primary btn--outline">JAY DESIGN</button> <a href="#" class="btn btn--primary">JAY DESIGN</a> <button type="button" class="btn btn--primary btn--radius">JAY DESIGN</button> <button type="button" class="btn btn--primary icon-check">JAY DESIGN</button> <button type="button" class="btn btn--primary btn--icon icon-search">JAY DESIGN</button> <button type="button" class="btn btn--primary btn--icon icon-search btn--radius">JAY DESIGN</button>
각 타입에 따른 버튼 컬러의 구분이다. 클래스 명을 확인해보면 primary, secondary, accent, basic, alert, cancel 등 필요에 따른 버튼 명으로 구분되었다. 버튼에 btn--outline
클래스명을 추가하면 동일 컬러의 아웃라인 버튼으로 스타일이 바뀐다.
<button type="button" class="btn btn--primary">JAY DESIGN</button> <button type="button" class="btn btn--primary btn--outline">JAY DESIGN</button> <button type="button" class="btn btn--secondary">JAY DESIGN</button> <button type="button" class="btn btn--secondary btn--outline">JAY DESIGN</button> <button type="button" class="btn btn--accent">JAY DESIGN</button> <button type="button" class="btn btn--accent btn--outline">JAY DESIGN</button> <button type="button" class="btn btn--basic">JAY DESIGN</button> <button type="button" class="btn btn--basic btn--outline">JAY DESIGN</button> <button type="button" class="btn btn--alert">JAY DESIGN</button> <button type="button" class="btn btn--cancel">JAY DESIGN</button>
버튼클래스명을 추가하지 않았을때의 사이즈를 기본으로, 클래스명 btn--xxs
,btn--xs
또는 btn--sm
하였을때 작은 사이즈의 버튼, btn--md
을 추가하였을때 기본보다 큰 사이즈의 버튼의 스타일이 적용된다. btn--full
은 가로 100% 버튼스타일이다. inputbox 또는 select 높이값도 동일한 방법이 적용되어, inputbox 또는 select 와 버튼이 병렬로 나열되었을때 동일한 높이값을 가진다.
<button type="button" class="btn btn--primary btn--xxs">JAY DESIGN</button> <button type="button" class="btn btn--primary btn--xs">JAY DESIGN</button> <button type="button" class="btn btn--primary btn--sm">JAY DESIGN</button> <button type="button" class="btn btn--primary">JAY DESIGN</button> <button type="button" class="btn btn--primary btn--md">JAY DESIGN</button> <button type="button" class="btn btn--primary btn--full">JAY DESIGN</button>
버튼그룹 내 버튼들이 일정한 간격을 유지하며, 클래스명을 추가하여 중앙 또는 우측으로 정렬이 가능하다. 버튼그룹의 가로 사이즈가 디바이스의 가로사이즈보다 커질시 버튼은 아래로 떨어지며 위와 아래 버튼의 간격을 두어 어색하지 않도록 스타일을 적용하여두었다.
좌측정렬
중앙정렬
우측정렬
세로정렬
반반
//좌측정렬
<div class="btns">
<button type="button" class="btn btn--primary">JAY DESIGN</button>
<button type="button" class="btn btn--primary btn--outline">JAY DESIGN</button>
</div>
//중앙정렬
<div class="btns btns--center">
<button type="button" class="btn btn--primary">JAY DESIGN</button>
<button type="button" class="btn btn--primary btn--outline">JAY DESIGN</button>
</div>
//우측정렬
<div class="btns btns--right">
<button type="button" class="btn btn--primary">JAY DESIGN</button>
<button type="button" class="btn btn--primary btn--outline">JAY DESIGN</button>
</div>
//세로정렬
<div class="btns btns--vertical">
<button type="button" class="btn btn--primary">JAY DESIGN</button>
<button type="button" class="btn btn--primary btn--outline">JAY DESIGN</button>
</div>
//반반
<div class="btns btns--dual">
<button type="button" class="btn btn--primary">JAY DESIGN</button>
<button type="button" class="btn btn--primary btn--outline">JAY DESIGN</button>
</div>
각 다른 사이즈의 아이콘 버튼
<button type="button" class="btn btn--icon btn--primary icon-search btn--xs"></button> <button type="button" class="btn btn--icon btn--primary icon-search btn--sm"></button> <button type="button" class="btn btn--icon btn--primary icon-search"></button> <button type="button" class="btn btn--icon btn--primary icon-search btn--md"></button>
기타 버튼
<button class="btn__menu"><span></span></button>