본문으로 건너뛰기

버튼 만들기

버튼이란?

웹페이지의 버튼은 사용자가 웹페이지에서 클릭을 유도하고, 기능을 수행할 수 있도록 돕는 요소입니다.

버튼은 다양한 기능을 수행할 수 있습니다. 예를 들어, 로그인 버튼을 누르면 로그인이 되고, 회원가입 버튼을 누르면 회원가입 페이지로 이동하고, 게시글 작성 버튼을 누르면 게시글 작성 페이지로 이동하는 등의 기능을 합니다.

버튼은 웹페이지의 어디에나 위치할 수 있습니다. 그만큼 자주 사용되는 요소이기 때문에, 버튼은 미리 만들어두는 경우가 많습니다.


버튼 예시 코드 - html
<li>
<a class="nav-link btn btn-primary" href="#footer"
>연락하기 <i class="fas fa-arrow-right"></i
></a>
</li>
버튼 예시 코드 - css
.navbar .btn {
margin-right: 24px;
}

.fas.fa-arrow-right {
margin-left: 8px;
font-size: 14px;
}

/* 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);
}

이 코드를 한개씩 살펴보면서 구성을 이해해 보겠습니다.