버튼 라이브러리 만들기

모든 웹사이트에는 <button> s가 필요합니다. CSS 사용자 지정 속성을 사용하면 복잡한 시나리오를 그 어느 때보다 쉽게 ​​관리할 수 있습니다.
<button>가 다소 복잡할 수 있기 때문입니다.

먼저 5가지 상태가 있습니다.

기본

활성

장애인

초점

호버링

각 상태는 서로 다른 스타일을 가질 수 있습니다. 예를 들면 다음과 같습니다.

background-color

border-color

box-shadow

color

border-width 등을 추가할 수도 있지만 이 4개의 속성만으로 이미 20개의 변형이 있습니다.

5개 상태 ✕ 4개 속성

"다크 모드"도 추가해 보겠습니다. 40가지 변형이 있습니다.



"개요"와 같은 간단한 수정자를 추가하면 다른 40개의 변형이 생성됩니다.



지금까지 "파란색 버튼"에 대해서만 80가지 변형이 있습니다.

CSS 사용자 지정 속성을 사용하면 이러한 모든 변형을 만드는 데 필요한 CSS 코드의 양을 단순화할 수 있습니다.

먼저 다음과 같이 4가지 속성을 정의합니다.

--btn-bdc: hsl(201, 79%, 46%);
--btn-bgc: hsl(201, 79%, 46%);
--btn-bxsh: transparent;
--btn-c: hsl(195, 100%, 100%);

그리고 버튼에 대한 CSS에서:

.c-btn {
  /* Excerpt */
  background-color: var(--btn-bgc);
  border-color: var(--btn-bdc);
  box-shadow: var(--btn-bxsh--sz) var(--btn-bxsh);
  color: var(--btn-c);
}

다음 단계는 다른 모든 상태에 대한 CSS 속성을 만드는 것입니다. 버튼 색상당 총 20개의 속성이 필요합니다.

/* :active */
--btn-bdc--act: hsl(201, 79%, 46%);
--btn-bgc--act: hsl(201, 79%, 46%);
--btn-bxsh--act: hsl(197, 92%, 61%);
--btn-c--act: hsl(195, 100%, 100%);

또한 모든 상태에 대해 CSS가 필요합니다. 여기 "활성"이 있습니다.

.c-btn:active {
  background-color: var(--btn-bgc--act);
  border-color: var(--btn-bdc--act);
  box-shadow: var(--btn-bxsh--act);
  color: var(--btn-c--act);
}

:disabled , :hover 및 :focus 에 대해 이를 반복합니다.

함께 모아서

이제 녹색 버튼에 필요한 20가지 변형을 생성하려면 업데이트된 속성이 있는 수정자 클래스를 추가하기만 하면 됩니다.

.c-btn--green {
  --btn-bdc: hsl(162, 63%, 41%);
  --btn-bdc--act: hsl(162, 63%, 41%);
  --btn-bdc--foc: hsl(162, 63%, 41%);
  --btn-bgc: hsl(162, 63%, 41%);
  --btn-bgc--act: hsl(162, 63%, 41%);
  --btn-bgc--dis: hsl(162, 50%, 90%);
  --btn-bgc--foc: hsl(162, 63%, 41%);
  --btn-bgc--hov: hsl(168, 80%, 23%);
  --btn-bxsh--act: hsl(158, 58%, 62%);
  --btn-bxsh--foc: hsl(158, 58%, 62%);
  --btn-c: hsl(152, 68%, 100%);
  --btn-c--hov: hsl(152, 68%, 100%);
}

다음은 모든 변형이 포함된 Codepen입니다.



읽어 주셔서 감사합니다!