엘리멘터 기본 버튼 위젯은 콘트롤러의 Advanced → Width가 사용자의 의도와 다르게 버튼의 래퍼 요소에 작용하며, 버튼의 크기를 width, height 속성으로 제어할 수 없는 구조적 문제를 가지고 있습니다. 이 위젯 스타일은 해당 문제들을 해결하고, 별도의 서드파티 버튼 위젯을 설치하지 않고 다양한 표현을 소화할 수 있도록 CSS를 개선하였습니다.
버튼 컬러
버튼의 컬러는 사용자의 Primary Secondary Text Accent 4개의 기본 토큰을 지역변수로 오버라이드하여 사용합니다. 자세한 내용은 사용자정의 컬러 사용하기 문서를 참고하세요.
템플릿 핵심 레이어
이 템플릿의 핵심 레이어는 🚀 Settings - jetcraft-ws-btn-01-a입니다. 버튼을 다른 페이지나 템플릿으로 복사할 경우 이 레이어도 함께 복사합니다. 소스코드 관리는 템플릿 기본 사용 안내 문서를 참고하세요.
클래스
버튼 위젯의 Classes에 추가할 수 있는 클래스는 다음과 같습니다.
| 클래스 이름 | 동작 |
no-shadow | :hover시 외곽선 강조를 삭제합니다 |
underline | :hover시 언더라인 애니메이션을 생성합니다 |
minicon | 모바일 기기에서 ♥ 25와 같이 메타정보 형태로 표시합니다. |
normalize | Dark 컬러셋을 사용할 때 버튼의 배경색과 글자색을 강제로 맞춰줍니다. |
- 버튼의 테두리는
:hover일 경우 테두리의 두께만큼flickering이 발생하지 않도록box-shadow로 사용합니다. - 버튼의 너비와 높이를
padding대신widthheight값을 사용하고 싶다면 예시 버튼 중 가장 하단 버튼을 참고하세요. 버튼을 감싸는 wrapper용div에 너비와 높이를 지정하면 됩니다.
underline 버튼 사용시 유의사항
underline 클래스가 추가 된 버튼은 위젯 자체의 margin, padding이 버튼과 밑줄 사이의 간격에 영향을 줍니다. 버튼의 외부에 margin, padding을 추가해야 한다면 버튼을 일반 container로 한번 감싸주어야 합니다.