반응형
실제 웹사이트에 바로 활용 가능한 버튼 디자인 예제를 통해, 실전 감각을 키워보세요.
입체감 있는 버튼
그림자 효과와 그라디언트를 활용해 입체감 있는 버튼을 구현할 수 있습니다. 버튼 클릭 시 살짝 들어가는 듯한 효과를 주면 사용자에게 직관적인 피드백을 제공합니다.
button { background: linear-gradient(to bottom, #3498db, #2980b9); color: white; border: none; padding: 0.8rem 1.2rem; border-radius: 6px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.1s ease, box-shadow 0.1s ease; }
button:active { transform: translateY(2px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
아이콘과 함께 있는 버튼
텍스트와 아이콘을 함께 배치하면 버튼의 의미를 더 명확하게 전달할 수 있습니다. 주로 소셜 로그인, 다운로드, 공유 버튼에 자주 사용됩니다.
<button style="display: flex; align-items: center; gap: 0.5rem; background: #2ecc71; color: white; padding: 0.8rem 1.2rem; border: none; border-radius: 4px;"> <svg width="16" height="16" fill="white">...아이콘 경로...</svg> 다운로드 </button>위처럼 SVG 아이콘을 함께 사용하면 확장성 있는 UI를 만들 수 있으며, 아이콘 크기나 정렬도 자유롭게 조정 가능합니다.
로딩 효과가 있는 버튼
서버 요청이 있는 버튼의 경우 클릭 시 로딩 상태를 보여주는 것이 중요합니다. 이를 통해 사용자 혼란을 줄이고 처리 중임을 시각적으로 전달할 수 있습니다.
<button id="loadBtn">저장하기</button> const btn = document.getElementById('loadBtn'); btn.addEventListener('click', () => { btn.textContent = '저장 중...'; btn.disabled = true; setTimeout(() => { btn.textContent = '저장하기'; btn.disabled = false; }, 2000); });위 코드는 클릭 시 버튼 텍스트를 변경하고 일정 시간 후 원래 상태로 복원하는 예제입니다. 로딩 스피너와 함께 사용하면 더욱 효과적입니다.
핵심 요약
- 입체감 있는 버튼으로 시각적 강조 효과 제공
- 아이콘을 활용해 버튼의 기능성을 강화
- 로딩 상태를 시각화하여 사용자 경험 개선
반응형