hover / press / active 세 상태 · 지정한 항목만 덮어쓴다설명
버튼이 눌렸는지 아닌지 화면이 알려 주지 않으면, 운전자는 같은 곳을 두 번 누릅니다. 세 가지 상태에 각각 다른 모습을 줄 수 있습니다.
- 가리킴(hover) — 마우스를 올렸을 때. "여기는 누를 수 있다"
- 누름(press) — 누르고 있는 동안. "지금 눌렀다"
- 활성(active) — 선택돼 있는 동안. 메뉴에서 현재 항목을 계속 강조할 때
지정한 항목만 바뀝니다. 밝기만 정해 두면 색은 원래대로 두고 밝기만 달라집니다. 그래서 임포트해 온 그림처럼 원래 색을 모르는 요소에도 안전하게 걸 수 있습니다.
여러 조각을 묶어 만든 버튼은 묶음 전체가 함께 반응합니다. 사각형에 글자를 얹은 버튼이라면 글자 위에 마우스를 올려도 사각형이 같이 밝아집니다.
설정 항목
| 이름 | 값 | 기본 | 설명 |
|---|---|---|---|
| 채움색 | color | (원래대로) | 그 상태일 때의 도형 채움색. 도형에만 적용됩니다. |
| 선색 | color | (원래대로) | 그 상태일 때의 선색. 역시 도형에만. |
| 투명도 | 0~1 | (원래대로) | 흐리게/진하게. |
| 아래로 | number | 0 | px 만큼 내려갑니다. 눌린 느낌을 주는 가장 흔한 방법. |
| 배율 | number | 1 | 크기. 1.05 면 살짝 커집니다. |
| 밝기 | number | 1 | 1.15 = 15% 밝게. 원래 색을 모르는 요소(임포트한 그림 등)에 쓰기 좋습니다. |
동작
아무것도 지정하지 않아도 기본 반응은 있습니다. 제어가 걸린 요소는 가리키면 하늘색 외곽선이, 화면 링크가 걸린 요소는 보라색 외곽선이 생깁니다. 누르면 1px 내려가고 살짝 어두워집니다. 키보드로 이동해 온 경우에는 노란 외곽선이 붙습니다.
세 상태가 겹치면 활성 → 가리킴 → 누름 순으로 이깁니다. 선택돼 있는 메뉴 항목을 가리키면 가리킴 모습이 되고, 그 상태에서 누르면 누름 모습이 됩니다.
채움색·선색은 도형에만 적용됩니다. 글자나 그림에 채움색을 지정해도 바뀌지 않습니다. 그런 요소는 밝기나 투명도로 반응을 주세요 — 어떤 요소에나 통합니다.
활성 상태는 메뉴 세트를 지정해야 동작합니다. 같은 세트로 묶인 항목 중 하나를 누르면 그것만 활성이 되고 나머지는 풀립니다(라디오 단추처럼). 세트를 지정하지 않으면 활성 모습을 정해 두어도 켜지지 않습니다.
터치 화면에서 가리킴 상태가 남지 않습니다. 손을 떼면 바로 풀립니다 — 터치 기기에서 마지막에 누른 버튼이 계속 강조된 채로 남는 흔한 문제를 피하려고 브라우저 기본 방식을 쓰지 않았습니다.
히트 영역을 '도형'으로 바꾸면 투명한 부분은 눌리지 않습니다. 기본값은 요소의 사각형 전체라 투명 채움도 눌립니다. 도형 모양대로만 받게 바꾸면 삼각형 바깥이나 도넛 구멍이 무반응이 되는데, 투명 채움을 클릭 영역으로 쓰는 버튼이라면 아예 눌리지 않게 됩니다.