본문으로 건너뛰기
실습하기

메뉴 내 버튼 구성

메뉴 내 버튼 구성
<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 강의를 등록해 주세요!