메뉴 내 버튼 구성
메뉴 내 버튼 구성
<li>
<a class="nav-link btn btn-primary" href="#footer"
>연락하기 <i class="fas fa-arrow-right"></i
></a>
</li>
메뉴 항목 안에 버튼을 구성할 수 있습니다.
버튼은 <a>
태그를 이용하여 구성되었으며, 클릭 시 #footer
로 이동하도록 설정되었습니다.
버튼을 위한 태그로 <button>
태그도 존재하지만, 여기서는 <a>
태그를 이용해 버튼을 구성하는 경우를 보여줍니다.
클릭 시 화면 최하단에 있는 #footer
로 이동하도록 설정되었습니다. 연락하기 버튼을 누르면 해당 섹션으로 이동합니다.
버튼 스타일
버튼 스타일
/* Buttons */
.btn {
display: inline-block;
padding: 12px 32px;
border-radius: 30px;
text-transform: uppercase;
font-size: 14px;
transition: 0.3s;
}
.btn-primary {
background: var(--primary-color);
color: #000000;
}
.btn-secondary {
margin: 5px 0;
background-color: var(--bg-secondary);
color: var(--bg-primary);
}
웹페이지 제작 시 다양한 버튼을 사용할 것입니다.
버튼마다 스타일을 일일이 설정하는 것보다, 버튼을 위한 공통 스타일을 미리 설정해두었습니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!