본문으로 건너뛰기

버튼 스타일링 해보기

메뉴 내 버튼 구성

메뉴 내 버튼 구성
<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);
}

웹페이지 제작 시 다양한 버튼을 사용할 것입니다.

버튼마다 스타일을 일일이 설정하는 것보다, 버튼을 위한 공통 스타일을 미리 설정해두었습니다.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!