버튼 요소 ③: 호버·상태별 색상

버튼은 마우스를 올렸을 때 반응이 있으면 눌러도 되는 곳이라는 것이 훨씬 잘 전달됩니다. 에디터에서는 버튼에 마우스를 올리면 살짝 커지거나 그림자가 생기게 할 수 있고, 마우스를 올렸을 때와 누르고 있을 때의 색을 따로 정해 둘 수도 있습니다. 이 글에서는 두 가지를 차례로 살펴봅니다. 버튼을 넣고 링크를 연결하는 방법과 버튼에 아이콘을 넣는 방법은 별도 글에서 다룹니다.

1. 어디에 있나요

설정 위치는 버튼의 종류에 따라 조금 다릅니다. 요소 추가로 넣은 버튼은 링크 형태라서 버튼 설정 창의 호버 / 전환 효과 항목에서 확대와 그림자를 켜고 끕니다. 전체 소스로 넣은 HTML에 button 태그 버튼이 있다면 툴바에 상태별 색상 (호버·눌림·포커스) 아이콘이 더 있어서 상태마다 색을 정할 수 있습니다. 호버 / 전환 효과 항목은 button 태그 버튼의 설정 창에도 같은 모습으로 있습니다.

2. 마우스를 올리면 커지고 그림자가 생기게 하기

버튼을 누른 뒤 Esc를 눌러 글자 편집을 끝내고, 오른쪽 위 모서리의 작은 원을 눌러 툴바를 펼친 다음 요소 설정 열기를 누릅니다. 버튼 설정 창을 아래로 내리면 맨 끝에 호버 / 전환 효과가 있습니다. 처음에는 호버 시 확대와 호버 시 그림자가 모두 OFF이고 전환 효과 (Transition)는 없음입니다. 위쪽의 배경색 항목에서는 버튼의 기본 배경색을 바꿀 수 있습니다.

• 호버 시 확대: 켜면 마우스를 올렸을 때 버튼이 약 3% 커집니다. 크기는 정해져 있어 조절하는 칸은 없습니다.
• 호버 시 그림자: 켜면 마우스를 올렸을 때 버튼 아래로 부드러운 그림자가 생깁니다.
• 전환 효과 (Transition): 변화가 이어지는 속도를 없음, 빠름, 보통, 느림, 통통 중에서 고릅니다.

1. 버튼을 누르고 Esc로 글자 편집을 끝낸 뒤 오른쪽 위 모서리의 작은 원을 누릅니다.
2. 툴바의 요소 설정 열기를 눌러 버튼 설정 창을 엽니다.
3. 창을 아래로 내려 호버 시 확대, 호버 시 그림자의 OFF를 눌러 ON으로 바꿉니다.
4. 전환 효과 (Transition)에서 속도를 고르고, 상단바의 저장을 누릅니다.

켜는 즉시 편집 화면의 버튼에 반영되므로 마우스를 올려 바로 확인할 수 있습니다. 아래는 확대와 그림자를 켜고 전환 효과를 보통으로 한 버튼의 모습입니다.

3. 상태마다 색 정하기

button 태그 버튼을 선택하고 Esc를 누른 뒤 오른쪽 위 모서리의 작은 원을 누르면 펼쳐진 툴바에 색 아이콘이 보입니다. 이 아이콘이 상태별 색상 (호버·눌림·포커스)이고, 링크 형태 버튼의 툴바에는 없습니다.

아이콘을 누르면 색상 창이 열립니다. 위쪽에서 바꿀 대상을 배경, 테두리, 텍스트, 그림자 중에서 고르고, 왼쪽 세로 탭에서 상태를 고릅니다. 이 글에서는 기본, 호버, 클릭을 사용합니다. 색은 색상 판과 아래의 색상 코드 칸, 견본 색 중 하나로 정합니다.

• 기본: 평소 버튼의 색입니다. 고르는 즉시 버튼에 반영됩니다.
• 호버: 마우스를 올렸을 때의 색입니다.
• 클릭: 버튼을 누르고 있는 동안의 색입니다.

이미 값을 정한 상태 탭에는 노란 점이 표시되고, 창 오른쪽 아래의 초기화 아이콘을 누르면 지금 고른 탭과 대상의 값이 지워집니다.

위 버튼은 호버의 배경을 노란색, 호버의 텍스트를 검정, 클릭의 배경을 초록으로 정한 것입니다. 저장한 뒤 에디터를 새로고침해도 이 설정은 유지되고, 마우스를 올리면 같은 색이 나타납니다.

4. 이렇게 활용해 보세요

• 기본 배경이 짙은 버튼이라면 호버 배경을 같은 계열의 밝은 색으로 정해 마우스를 올렸을 때 반응이 있도록 해 보세요.
• 색까지 바꾸지 않아도 되는 버튼에는 호버 시 확대와 그림자만 켜도 충분합니다. 전환 효과를 보통으로 하면 변화가 자연스럽게 이어집니다.
• 눌렀을 때만 색을 달리하고 싶다면 기본과 호버는 그대로 두고 클릭 탭의 배경만 정해 보세요. 버튼을 누르는 동안 색이 바뀝니다.
• 호버 배경을 밝게 바꿨다면 텍스트 색도 함께 정해 글자가 묻히지 않는지 확인하세요.

5. 알아 두실 점

• 이 글의 화면은 모두 편집 화면 기준입니다.
• 호버 시 확대와 호버 시 그림자, 상태별 색은 버튼마다 따로 정합니다.
• 변경한 내용은 상단바의 저장을 눌러야 보존됩니다.