Logo

CSS 버튼 스타일링 - <button>

HTML과 CSS를 이용하여 다음과 같은 웹에서 흔히 볼 수 있는 버튼을 만들어보도록 하겠습니다.

HTML 작성

먼저 4가지 종류(기본, 성공, 오류, 경고)의 버튼에 대한 HTML을 작성합니다.

<form>
  <button>기본</button>
  <button disabled class="success">성공</button>
  <button class="error">오류</button>
  <button class="warning">경고</button>
</form>

디폴트 스타일 제거

대부분의 브라우저는 User Agent Style이라고 불리는 디폴트(default) 스타일을 버튼에 적용해줍니다. 아무 스타일을 적용하지 않더라도 <button/> 엘리먼트가 시각적으로 버튼처럼 보이게 하기 위함인데요. 아이러니하게도 커스텀 스타일을 적용할 때는 이러한 브라우저 별로 조금씩 상이한 이 디폴트 스타일이 걸림돌이 되곤 합니다.

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

위와 같이 appearance 속성을 사용해서 이러한 브라우저에서 디폴트로 제공하는 스타일을 제거합니다.

기본 스타일링

여백, 폰트, 테두리, 레이아웃과 같이 버튼의 종류에 무관하게 동일하게 유지되는 스타일을 먼저 적용해보겠습니다.

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");

button {
  /* 생략 */
  margin: 0;
  padding: 0.5rem 1rem;

  font-family: "Noto Sans KR", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  text-decoration: none;

  display: inline-block;
  width: auto;

  border: none;
  border-radius: 4px;
}

반드시 필요하지는 않지만 버튼에서 없으면 뭔가 허전한 감초같은 효과들도 적용해주도록 하겠습니다.

button {
  /* 생략 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  cursor: pointer;

  transition: 0.5s;
}

상태 스타일링

<button/> 엘리먼트는 active, hover, focus, disabled와 같은 상태를 갖습니다. 버튼의 상태가 변할 때 살짝씩 시각적인 변화를 주면 보다 긍정적인 사용자 경험을 제공할 수 있습니다.

button:active,
button:hover,
button:focus {
  background: var(--button-hover-bg-color);
  outline: 0;
}
button:disabled {
  opacity: 0.5;
}

background 속성에 CSS 변수(CSS variables, CSS custom properties)가 사용되고 있는데요. 다음 섹션에서 이 CSS 변수를 선언하고 버튼 종류에 따라 다른 색상을 할당하겠습니다.

변형 스타일링

HTML 코드를 보면 버튼의 종류를 구분하기 위해서 <button/> 엘리먼트마다 다른 클래스(class)가 설정되어 있습니다. 클래스에 따라서 글자와 배경에 다른 색상을 적용할 수 있도록 CSS 변수를 선언하고 기본 버튼의 색상을 할당합니다. 이 때, 이전 섹션에서 언급한 상태가 변했을 때 적용해 줄 색상도 추가로 정의합니다.

:root {
  --button-color: #ffffff;
  --button-bg-color: #0d6efd;
  --button-hover-bg-color: #025ce2;
}

그리고 위에서 정의한 CSS 변수를 이용하여 기본 버튼의 글자색과 배경색을 스타일해줍니다.

button {
  /* 생략 */
  background: var(--button-bg-color);
  color: var(--button-color);
}

다른 종류의 버튼에는 다른 색상이 적용될 수 있도록 클래스 선택자를 통해 CSS 변수의 값을 재할당 해줍니다.

button.success {
  --button-bg-color: #28a745;
  --button-hover-bg-color: #218838;
}

button.error {
  --button-bg-color: #dc3545;
  --button-hover-bg-color: #c82333;
}

button.warning {
  --button-color: #212529;
  --button-bg-color: #ffc107;
  --button-hover-bg-color: #e0a800;
}

경고 버튼의 경우, 배경색이 밝아서 다른 종류의 버튼과 달리 글자색을 어두운 계열로 바꿔준 것을 볼 수 있습니다.

전체 코드

This work is licensed under CC BY 4.0

messageCircle