이 페이지는 Cloud Translation API를 통해 번역되었습니다.

버튼 구성요소 빌드

색상 적응형, 반응형, 액세스 가능한 <button> 구성요소를 빌드하는 방법에 관한 기본 개요입니다.

Adam Argyle

이 게시물에서는 색상 적응성을 구축하는 방법에 대한 생각을 공유하고, 반응형이며 액세스 가능한 <button> 요소를 사용합니다. 데모를 사용해 보고 출처

</ph>

</ph> 버튼은 밝은 테마와 어두운 테마에서 키보드와 마우스를 통해 상호작용합니다.

동영상을 선호한다면 이 게시물의 YouTube 버전을 참고하세요.

개요

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

이 <button> 드림 요소가 사용자 상호작용을 위해 빌드됩니다. click 이벤트가 키보드에서 트리거됩니다. 터치, 음성 등 다양한 기능을 사용할 수 있습니다. 타이밍을 참고하세요. 또한 각 브라우저에서 몇 가지 기본 스타일을 사용해 보세요. 맞춤설정할 수 있습니다. 선택하려면 color-scheme을(를) 사용하세요. 브라우저에서 제공하는 밝은 버튼과 어두운 버튼에 적용할 수도 있습니다

또한 디맨드젠 캠페인의 버튼, 각각 이전 Codepen 삽입에 나와 있습니다. 유형이 없는 <button>는 <form> 내에 있도록 조정되어 제출 유형으로 변경됩니다.

<!-- buttons -->
<button></button>
<button type="submit"></button>
<button type="button"></button>
<button type="reset"></button>

<!-- button state -->
<button disabled></button>

<!-- input buttons -->
<input type="button" />
<input type="file">

이달의 GUI 챌린지에서는, 각 버튼에 스타일이 지정되므로 인텐트를 시각적으로 구분할 수 있습니다. 재설정 버튼 경고 색상이 표시되며 버튼 파란색 강조 텍스트가 표시되므로 일반보다 약간 더 프로모션으로 표시됩니다. 버튼을 클릭합니다.

양식이 아닌 양식으로 표시된 모든 버튼 유형의 최종 집합 미리보기. 아이콘 버튼과 맞춤설정된 버튼에 멋진 추가 기능이 포함되어 있습니다. — </ph> 양식이 아닌 양식으로 표시된 모든 버튼 유형의 최종 집합 미리보기 아이콘 버튼과 사용자 지정 버튼을 추가할 수 있습니다.

버튼에는 의사 클래스도 있습니다. CSS가 스타일 지정에 사용할 수 있습니다. 이러한 클래스는 웹 UI를 맞춤설정하는 데 필요한 CSS 후크를 버튼 느낌: :hover 마우스가 버튼 위에 있을 때 :active: 마우스를 올리거나 또는 키보드가 누르고 있을 때 :focus 또는 :focus-visible 지원 기술 스타일 지정을 지원합니다.

button:hover {}
button:active {}
button:focus {}
button:focus-visible {}

드림 <ph type="x-smartling-placeholder">

어두운 테마의 모든 버튼 유형 최종 세트 미리보기 — 어두운 테마의 모든 버튼 유형 최종 미리보기

마크업

HTML 사양에서 제공하는 버튼 유형 외에 아이콘이 있는 버튼 및 맞춤 클래스 btn-custom가 있는 버튼이 있습니다.

<button>Default</button>
<input type="button" value="<input>"/>
<button>
  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
    <path d="..." />
  </svg>
  Icon
</button>
<button type="submit">Submit</button>
<button type="button">Type Button</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
<button class="btn-custom">Custom</button>
<input type="file">

그런 다음 테스트를 위해 각 버튼을 양식 안에 배치합니다. 이렇게 하면 스타일은 기본 버튼에 맞게 적절히 업데이트되며, 기본 버튼은 제출 버튼 또한 아이콘 전략을 인라인 SVG에서 마스킹된 SVG로 전환합니다. 둘 다 동일하게 작동하도록 할 수 있습니다

<form>
  <button>Default</button>
  <input type="button" value="<input>"/>
  <button>Icon <span data-icon="cloud"></span></button>
  <button type="submit">Submit</button>
  <button type="button">Type Button</button>
  <button type="reset">Reset</button>
  <button disabled>Disabled</button>
  <button class="btn-custom btn-large" type="button">Large Custom</button>
  <input type="file">
</form>

이 시점에서 조합 매트릭스가 상당히 까다롭습니다. 사이 버튼 형식, 의사 클래스, 형태에 관계없이 20개가 넘는 만들 수 있습니다. CSS를 사용하면 각 광고 형식을 명확하게 설명할 수 있으므로 명확히 할 수 있습니다!

접근성

버튼 요소에는 자연스럽게 액세스할 수 있지만, 버튼 요소에는 향상되었습니다.

함께 마우스를 가져가서 초점 맞추기

:hover 및 :focus를 :is() 기능과 함께 그룹화하고 싶습니다. 가상 선택기입니다. 이렇게 하면 인터페이스에서 항상 키보드를 고려하도록 할 수 있습니다. 보조 테크 스타일입니다.

button:is(:hover, :focus) {
  …
}

드림 <ph type="x-smartling-placeholder">

</ph>

데모 사용해 보기

대화형 초점 링

키보드 및 보조 기술 사용자를 위해 포커스 링에 애니메이션을 적용하는 것이 좋습니다. 난 버튼에서 바깥쪽으로 5픽셀만큼 윤곽선을 애니메이션으로 보여주지만 버튼이 활성화되지 않았을 때 말이죠. 이렇게 하면 초점이 링이 되는 효과가 발생합니다. 눌렀을 때 버튼 크기로 다시 축소됩니다.

:where(button, input):where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

통과 색상 대비 확인

밝은 색상과 어두운 환경에서 최소 4가지 색상 조합이 있어 버튼, 제출 버튼, 재설정 버튼, 사용 중지된 버튼입니다. VisBug는 여기에서 다음을 위해 사용됩니다. 모든 점수를 한 번에 검사하고 표시할 수 있습니다.

볼 수 없는 사용자에게 아이콘 숨기기

아이콘 버튼을 생성할 때 아이콘은 UI 요소를 시각적으로 지원해야 합니다. 버튼 텍스트를 선택합니다. 또한 시각이 용이한 사람에게 해당 아이콘이 적합하지 않음을 의미합니다. 손실이 발생할 수 있습니다. 다행히 브라우저에서는 스크린 리더에서 항목을 숨기는 방법을 시각장애인이 장식 버튼을 사용하여 눈을 뗄 수 없도록 하기 위해 이미지:

<button>
  <svg … aria-hidden="true">...</svg>
  Icon Button
</button>

드림 <ph type="x-smartling-placeholder">

버튼의 접근성 트리를 보여주는 Chrome DevTools 트리는 aria-hidden이 true로 설정되어 있으므로 버튼 이미지를 무시합니다. — 버튼의 접근성 트리를 보여주는 Chrome DevTools aria-hidden이 true로 설정되어 있으므로 트리에서 버튼 이미지를 무시합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

스타일

다음 섹션에서는 먼저 Google 태그 관리자를 위한 맞춤 속성 시스템을 변경할 수 있습니다. 이러한 맞춤 속성을 사용하면 요소를 선택하고 모양을 맞춤설정할 수 있습니다.

적응형 맞춤 숙박 시설 전략

이 GUI 챌린지에 사용되는 맞춤 속성 전략은 색 구성표 빌드에 사용됩니다. 대상 밝은 색상 자동 조절과 어두운 색상 시스템을 사용하고 각 테마의 맞춤 속성은 다음과 같습니다. 그에 따라 정의되고 명명됩니다. 그런 다음 단일 맞춤 속성을 사용하여 테마의 현재 값이며 CSS 속성에 할당됩니다. 나중에 이 싱글은 맞춤 속성을 다른 값으로 업데이트한 후 버튼을 업데이트할 수 있습니다. 있습니다.

button {
  --_bg-light: white;
  --_bg-dark: black;
  --_bg: var(--_bg-light);

  background-color: var(--_bg);
}

@media (prefers-color-scheme: dark) {
  button {
    --_bg: var(--_bg-dark);
  }
}

드림

밝은 테마와 어두운 테마가 선언적이고 명확하다는 점이 마음에 듭니다. 이 간접 및 추상화가 --_bg 커스텀 속성으로 오프로드됩니다. 현재 유일한 '반응형' 속성; --_bg-light 및 --_bg-dark는 정적입니다. 또한 밝은 테마가 기본 테마이며 어두움은 조건부로만 적용됩니다.

디자인 일관성 준비

공유 선택기

다음 선택기는 다양한 유형의 모든 버튼을 타겟팅하는 데 사용되며 다소 부담스러울 수도 있습니다. :where(): 버튼을 맞춤설정할 수 있습니다. 버튼은 종종 대체 시나리오에 맞게 조정되며 :where() 선택기는 쉽습니다. :where() 내에서 다음을 포함한 각 버튼 유형이 선택됩니다. ::file-selector-button는 사용됨 (:is() 또는 :where() 내부)

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  …
}

모든 맞춤 속성의 범위가 이 선택기 내에서 지정됩니다. 검토할 시간 모든 맞춤 속성을 사용할 수 있습니다. 이 작업에는 꽤 많은 맞춤 속성이 사용됩니다. 버튼을 클릭합니다. 각 그룹을 설명한 다음 어두운 부분과 줄어든 부분을 모션 컨텍스트를 찾을 수도 있습니다.

버튼 강조 색상

제출 버튼과 아이콘은 다채로운 색상이 돋보입니다.

--_accent-light: hsl(210 100% 40%);
--_accent-dark: hsl(210 50% 70%);
--_accent: var(--_accent-light);

버튼 텍스트 색상

버튼 텍스트 색상이 흰색이나 검은색이 아닌 어둡거나 밝은 버전임 /--_accent 사용 중 hsl() 및 210 색조 유지:

--_text-light: hsl(210 10% 30%);
--_text-dark: hsl(210 5% 95%);
--_text: var(--_text-light);

버튼 배경 색상

밝은 테마를 제외하고 버튼 배경은 동일한 hsl() 패턴을 따릅니다. 버튼은 흰색으로 설정되어 표면이 흰색으로 가까이 보이게 다른 노출 영역 앞에,

--_bg-light: hsl(0 0% 100%);
--_bg-dark: hsl(210 9% 31%);
--_bg: var(--_bg-light);

버튼 배경

이 배경 색상은 표면이 다른 표면 뒤에 나타나게 하기 위한 것입니다. 도움이 될 수 있습니다.

--_input-well-light: hsl(210 16% 87%);
--_input-well-dark: hsl(204 10% 10%);
--_input-well: var(--_input-well-light);

버튼 패딩

버튼 텍스트 주변의 간격은 ch 드림 글꼴 크기에 대한 상대적 길이입니다. 이는 인코더-디코더 아키텍처를 버튼을 사용하면 font-size 및 버튼 배율을 간단히 위로 올릴 수 있습니다. 다음과 같이 비례합니다.

--_padding-inline: 1.75ch;
--_padding-block: .75ch;

버튼 테두리

버튼 테두리 반경이 맞춤 속성에 보관되므로 파일 입력이 다른 버튼과 일치해야 합니다. 테두리 색상은 설정된 적응형 색상을 따릅니다. 시스템:

--_border-radius: .5ch;

--_border-light: hsl(210 14% 89%);
--_border-dark: var(--_bg-dark);
--_border: var(--_border-light);

버튼 마우스 오버 하이라이트 효과

이러한 속성은 상호작용 시 전환하기 위한 크기 속성을 설정합니다. 강조 색상은 자동 조절 색상 시스템을 따릅니다. 이러한 디코더가 결국 box-shadow에 사용됩니다. 효과:

--_highlight-size: 0;

--_highlight-light: hsl(210 10% 71% / 25%);
--_highlight-dark: hsl(210 10% 5% / 25%);
--_highlight: var(--_highlight-light);

버튼 텍스트 그림자

각 버튼에는 은은한 텍스트 그림자 스타일이 있습니다. 이렇게 하면 텍스트가 텍스트 위에 가독성을 개선하고 멋진 프레젠테이션을 다듬을 수 있습니다.

--_ink-shadow-light: 0 1px 0 var(--_border-light);
--_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
--_ink-shadow: var(--_ink-shadow-light);

버튼 아이콘

아이콘은 상대적 길이 ch 단위 덕분에 2자 크기입니다. 이렇게 하면 아이콘이 버튼 텍스트에 비례하여 조정됩니다. 이 아이콘 색상은 --_accent-color를 사용하여 적응형 테마 내에 적용됨 color[색상]

--_icon-size: 2ch;
--_icon-color: var(--_accent);

드림

버튼 그림자

그림자가 빛과 어둠에 적절하게 적응하려면 그림자의 각도와 선택할 수 있습니다. 밝은 테마 그림자는 미묘하고 색조가 희미할 때 가장 좋습니다. 색깔 쪽으로 움직입니다 어두운 테마 그림자는 더 어둡고 채도가 높아지면 어두운 표면 색상이 오버레이될 수 있습니다.

--_shadow-color-light: 220 3% 15%;
--_shadow-color-dark: 220 40% 2%;
--_shadow-color: var(--_shadow-color-light);

--_shadow-strength-light: 1%;
--_shadow-strength-dark: 25%;
--_shadow-strength: var(--_shadow-strength-light);

자동 조절 색상과 강점을 사용하면 두 가지 깊이의 그림자를 조합할 수 있습니다.

--_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));

--_shadow-2: 
  0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),
  0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%));

또한 버튼에 약간 3D 모양을 제공하기 위해 1px 상자 그림자가 사용됩니다. 환상이 됩니다.

--_shadow-depth-light: 0 1px var(--_border-light);
--_shadow-depth-dark: 0 1px var(--_bg-dark);
--_shadow-depth: var(--_shadow-depth-light);

버튼 전환

적응형 색상 패턴에 따라 두 개의 정적 속성을 만들어 디자인 시스템 옵션을 유지합니다.

--_transition-motion-reduce: ;
--_transition-motion-ok:
  box-shadow 145ms ease,
  outline-offset 145ms ease
;
--_transition: var(--_transition-motion-reduce);

드림

참고: 초기 버튼 디자인에서 --_transition-motion-reduce 속성에 있는 border-color에 애니메이션을 적용했습니다. 나중에 삭제했지만 마음이 바뀌었을 때를 대비해 패턴은 그대로 두었습니다.

선택기에 모든 속성 함께 표시

선택기의 모든 커스텀 속성

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  --_accent-light: hsl(210 100% 40%);
  --_accent-dark: hsl(210 50% 70%);
  --_accent: var(--_accent-light);

--_text-light: hsl(210 10% 30%);
  --_text-dark: hsl(210 5% 95%);
  --_text: var(--_text-light);

--_bg-light: hsl(0 0% 100%);
  --_bg-dark: hsl(210 9% 31%);
  --_bg: var(--_bg-light);

--_input-well-light: hsl(210 16% 87%);
  --_input-well-dark: hsl(204 10% 10%);
  --_input-well: var(--_input-well-light);

--_padding-inline: 1.75ch;
  --_padding-block: .75ch;

--_border-radius: .5ch;
  --_border-light: hsl(210 14% 89%);
  --_border-dark: var(--_bg-dark);
  --_border: var(--_border-light);

--_highlight-size: 0;
  --_highlight-light: hsl(210 10% 71% / 25%);
  --_highlight-dark: hsl(210 10% 5% / 25%);
  --_highlight: var(--_highlight-light);

--_ink-shadow-light: 0 1px 0 hsl(210 14% 89%);
  --_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
  --_ink-shadow: var(--_ink-shadow-light);

--_icon-size: 2ch;
  --_icon-color-light: var(--_accent-light);
  --_icon-color-dark: var(--_accent-dark);
  --_icon-color: var(--accent, var(--_icon-color-light));

--_shadow-color-light: 220 3% 15%;
  --_shadow-color-dark: 220 40% 2%;
  --_shadow-color: var(--_shadow-color-light);
  --_shadow-strength-light: 1%;
  --_shadow-strength-dark: 25%;
  --_shadow-strength: var(--_shadow-strength-light);
  --_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));
  --_shadow-2: 
    0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%))
  ;

--_shadow-depth-light: hsl(210 14% 89%);
  --_shadow-depth-dark: var(--_bg-dark);
  --_shadow-depth: var(--_shadow-depth-light);

--_transition-motion-reduce: ;
  --_transition-motion-ok:
    box-shadow 145ms ease,
    outline-offset 145ms ease
  ;
  --_transition: var(--_transition-motion-reduce);
}

어두운 테마 조정

-light 및 -dark 정적 props 패턴의 값은 다음과 같은 경우 명확해집니다. 다음과 같이 어두운 테마 props가 설정됩니다.

@media (prefers-color-scheme: dark) {
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="file"]
  ),
  :where(input[type="file"])::file-selector-button {
    --_bg: var(--_bg-dark);
    --_text: var(--_text-dark);
    --_border: var(--_border-dark);
    --_accent: var(--_accent-dark);
    --_highlight: var(--_highlight-dark);
    --_input-well: var(--_input-well-dark);
    --_ink-shadow: var(--_ink-shadow-dark);
    --_shadow-depth: var(--_shadow-depth-dark);
    --_shadow-color: var(--_shadow-color-dark);
    --_shadow-strength: var(--_shadow-strength-dark);
  }
}

이렇게 하면 쉽게 읽을 수 있을 뿐 아니라 맞춤 버튼을 사용하는 사용자는 새로운 소품을 개발하고 있습니다.

모션 적응 감소

방문하는 사용자의 움직임이 괜찮다면 --_transition을(를) 할당합니다. var(--_transition-motion-ok):

@media (prefers-reduced-motion: no-preference) {
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="file"]
  ),
  :where(input[type="file"])::file-selector-button {
    --_transition: var(--_transition-motion-ok);
  }
}

몇 가지 공유 스타일

버튼과 입력은 글꼴이 inherit로 설정되어야 나머지 글꼴은 그렇지 않으면 브라우저에서 스타일을 지정합니다. 또한 letter-spacing에 적용됩니다. line-height를 1.5로 설정하면 레터박스가 설정됩니다. 텍스트의 위아래에 공간을 남겨두세요.

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  /* …CSS variables */

  font: inherit;
  letter-spacing: inherit;
  line-height: 1.5;
  border-radius: var(--_border-radius);
}

버튼 스타일 지정

선택기 조정

선택기 input[type="file"]는 입력의 버튼 부분이 아닙니다. pseudo-element ::file-selector-button가 포함되어 있으므로 input[type="file"]를 삭제했습니다. 선택:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  
}

커서 및 터치 조정

먼저 pointer 스타일로 커서 스타일을 지정합니다. 이렇게 하면 버튼이 마우스 사용자에게 상호작용할 수 있습니다. 그런 다음 touch-action: manipulation를 클릭을 기다리지 않고 잠재적인 더블 클릭을 관찰할 수 있으므로 버튼이 더 빨라진 느낌:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  cursor: pointer;
  touch-action: manipulation;
}

드림

참고: HTML 문서에 <meta name="viewport" content="width=device-width">가 있으면 touch-action: manipulation가 필요하지 않습니다. 여기에서 Chrome 개발자에 관해 자세히 알아보세요.

색상 및 테두리

그런 다음 몇 가지를 사용하여 글꼴 크기, 배경, 텍스트, 테두리 색상을 맞춤설정합니다. 적응형 맞춤 속성을 살펴보겠습니다.

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  font-size: var(--_size, 1rem);
  font-weight: 700;
  background: var(--_bg);
  color: var(--_text);
  border: 2px solid var(--_border);
}

그림자

버튼에는 몇 가지 훌륭한 기법이 적용되어 있습니다. 이 text-shadow: 버튼이 은은하게 어울리게 밝게 조절됩니다. 텍스트가 배경 위에 멋지게 배치되어 있습니다. 대상 box-shadow님, 세 개의 그림자가 할당되었습니다. 첫 번째 --_shadow-2는 일반 상자 그림자입니다. 두 번째 그림자는 버튼이 눈에 띄지 않게 보이게 하는 속입니다. 약간 높아졌습니다. 마지막 그림자는 마우스 오버 강조 표시로, 처음에는 나중에 크기가 지정되고 전환되어 확장할 수 있습니다.

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  box-shadow: 
    var(--_shadow-2),
    var(--_shadow-depth),
    0 0 0 var(--_highlight-size) var(--_highlight)
  ;
  text-shadow: var(--_ink-shadow);
}

레이아웃

버튼에 flexbox 레이아웃을 부여했습니다. 특히 콘텐츠에 맞는 inline-flex 레이아웃을 사용합니다. 그런 다음 가운데로 하위 요소를 세로와 가로로 정렬하고 center로 이동합니다. 이렇게 하면 아이콘과 기타 레이어가 버튼 요소를 사용하여 적절하게 정렬합니다.

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

간격

버튼 간격의 경우 형제를 계속 유지하려면 gap 접촉하여 논리적이라고 버튼에 대한 패딩 속성 간격은 모든 텍스트 레이아웃에서 작동합니다.

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  gap: 1ch;
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
}

터치 및 마우스 UX

다음 섹션은 주로 휴대기기를 사용하는 터치 사용자를 위한 것입니다. 첫 번째 속성 user-select님, 모든 사용자에게 적용됩니다. 버튼 텍스트를 강조 표시하는 것을 방지합니다. 대부분 버튼을 탭하고 길게 눌러 터치 기기에서 버튼의 텍스트가 강조 표시됩니다.

평소에는 내장 버튼의 사용자 환경이 아닌 것 같았습니다. user-select를 none으로 설정하여 사용 중지합니다. 강조표시 색상 탭하기 (-webkit-tap-highlight-color) 운영체제 컨텍스트 메뉴와 (-webkit-touch-callout) 웹 중심의 기타 버튼 기능으로는 버튼 사용자 기대에 부응하므로 이들 역시 삭제합니다.

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

화면전환

적응형 --_transition 변수는 전환 속성:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  transition: var(--_transition);
}

마우스를 갖다 대고 사용자가 누르지 않을 때 그림자 하이라이트를 조정합니다. 초점이 맞춰져 주변에서 자라나는 것처럼 보이도록 하세요. 버튼:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):where(:not(:active):hover) {
  --_highlight-size: .5rem;
}

참고: ::file-selector-button는 효과를 볼 수 없으므로 선택기에서 생략됩니다.

포커스가 있을 때 버튼에서 포커스 윤곽선 오프셋을 늘리고 포커스 모양이 버튼 안에서 자라나는 것처럼 좋아집니다.

:where(button, input):where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

아이콘

아이콘을 처리하기 위해 선택기에 직접 SVG를 위한 :where() 선택기가 추가되었습니다. 맞춤 속성 data-icon가 있는 하위 요소 또는 요소. 아이콘 크기가 설정되었습니다. 인라인 및 차단 논리 속성을 사용하여 맞춤 속성을 적용할 수 있습니다. 획 색상 가 설정되고 drop-shadow 드림 text-shadow와 일치시킵니다. flex-shrink가 0로 설정되어 있으므로 아이콘이 찌그러뜨렸습니다. 마지막으로 안감 아이콘을 선택하고 해당 스타일을 fill: none 및 round 선 한도와 선 결합:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
) > :where(svg, [data-icon]) {
  block-size: var(--_icon-size);
  inline-size: var(--_icon-size);
  stroke: var(--_icon-color);
  filter: drop-shadow(var(--_ink-shadow));

  flex-shrink: 0;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

제출 버튼 맞춤설정

제출 버튼이 좀 더 눈에 띄도록 하고 싶었는데 버튼의 텍스트 색상을 강조 색상으로 만들면 됩니다.

:where(
  [type="submit"], 
  form button:not([type],[disabled])
) {
  --_text: var(--_accent);
}

재설정 버튼 맞춤설정

재설정 버튼에 경고 표시가 있어서 사용자에게 해를 입힐 수 있습니다. 밝은 테마의 스타일도 선택했습니다. 버튼을 사용합니다. 맞춤설정은 기본 색상을 적절하게 변경하고 버튼은 스타일을 업데이트합니다.

:where([type="reset"]) {
  --_border-light: hsl(0 100% 83%);
  --_highlight-light: hsl(0 100% 89% / 20%);
  --_text-light: hsl(0 80% 50%);
  --_text-dark: hsl(0 100% 89%);
}

또한 포커스 외곽선 색상이 기본 색상의 강조 색상과 일치하면 좋겠다고 생각했습니다. 있습니다. 텍스트 색상은 진한 빨간색을 연한 빨간색으로 조정합니다. 윤곽선 색상을 지정합니다. 이를 키워드와 일치 currentColor:

:where([type="reset"]):focus-visible {
  outline-color: currentColor;
}

사용 중지된 버튼 맞춤설정

비활성화된 버튼의 색상 대비가 낮기 때문에 비활성화된 버튼을 지연시켜 덜 활성 상태로 보이게 합니다. 각각에 대해 통과하는지 확인하여 HSL 밝기 값을 스코어가 DevTools 또는 VisBug에서 전달된 것으로 간주됩니다.

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
)[disabled] {
  --_bg: none;
  --_text-light: hsl(210 7% 40%);
  --_text-dark: hsl(210 11% 71%);

  cursor: not-allowed;
  box-shadow: var(--_shadow-1);
}

파일 입력 버튼 맞춤설정

파일 입력 버튼은 스팬과 버튼의 컨테이너입니다. CSS는 중첩된 버튼의 스타일을 지정하도록 할 수는 있습니다. 스팬 컨테이너에 max-inline-size가 주어졌으므로 다음보다 커지지 않습니다. inline-size: 100%는 스스로 축소하고 맞추는 것을 허용합니다. 컨테이너는 컨테이너보다 작아야 합니다 배경 색상이 자동 조절 색상으로 설정되었습니다. 다른 표면보다 어둡기 때문에 파일 선택기 버튼 뒤에 표시됩니다.

:where(input[type="file"]) {
  inline-size: 100%;
  max-inline-size: max-content;
  background-color: var(--_input-well);
}

파일 선택기 버튼과 입력 유형 버튼이 구체적으로 표시되어 있습니다. appearance: none: 브라우저에서 제공하지 않은 스타일을 삭제합니다. 덮어쓰게 됩니다.

:where(input[type="button"]),
:where(input[type="file"])::file-selector-button {
  appearance: none;
}

마지막으로 버튼의 inline-end에 여백을 추가하여 스팬 텍스트를 푸시합니다. 버튼에서 멀어져 약간의 공간이 생기게 됩니다.

:where(input[type="file"])::file-selector-button {
  margin-inline-end: var(--_padding-inline);
}

특별한 어두운 테마 예외

기본 작업 버튼의 배경을 어둡게 하여 대비가 높아짐 약간 홍보된 느낌을 줍니다.

@media (prefers-color-scheme: dark) {
  :where(
    [type="submit"],
    [type="reset"],
    [disabled],
    form button:not([type="button"])
  ) {
    --_bg: var(--_input-well);
  }
}

변형 만들기

재미를 위해, 그리고 실용적이기 때문에 몇 개의 연습을 하는 방법을 보여드리기로 했습니다. 있습니다. 한 가지 변형은 기본 버튼을 자주 사용하는 것과 비슷하며 매우 생동감 넘칩니다. 보여드리겠습니다 또 다른 변형은 큽니다. 마지막 변형에는 그라데이션으로 채워진 아이콘이 있습니다.

활기찬 버튼

이 버튼 스타일을 위해 기본 소품을 파란색으로 직접 덮어썼습니다. 있습니다. 쉽고 빠르게 할 수 있었지만 적응형 소품과 디자인은 없애 버렸습니다. 밝은 테마와 어두운 테마 모두에서 동일하게 표시됩니다.

.btn-custom {
  --_bg: linear-gradient(hsl(228 94% 67%), hsl(228 81% 59%));
  --_border: hsl(228 89% 63%);
  --_text: hsl(228 89% 100%);
  --_ink-shadow: 0 1px 0 hsl(228 57% 50%);
  --_highlight: hsl(228 94% 67% / 20%);
}

참고: 적응형 기본 작업 버튼을 빌드하려면 --_bg 대신 --_bg-light 및 --_bg-dark을 덮어씁니다. 이러한 변수를 덮어쓰면 기본 속성이 새로 정의된 밝은 속성과 어두운 속성 간에 전환할 수 있습니다.

큰 버튼

이 버튼 스타일은 --_size 맞춤 속성을 수정하여 구현할 수 있습니다. 패딩 및 기타 공간 요소는 이 크기에 따라 달라지며, 새 크기와 비례합니다

.btn-large {
  --_size: 1.5rem;
}

아이콘 버튼

이 아이콘 효과는 버튼 스타일과 아무 관련이 없지만 몇 가지 CSS 속성으로 이를 달성하는 방법과 버튼이 얼마나 잘 작동하는지 보여줍니다. 인라인 SVG가 아닌 아이콘을 처리합니다.

[data-icon="cloud"] {
  --icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg") center / contain no-repeat;

  -webkit-mask: var(--icon-cloud);
  mask: var(--icon-cloud);
  background: linear-gradient(to bottom, var(--_accent-dark), var(--_accent-light));
}

결론

이제 제가 어떻게 했는지 알게 되셨으니 어떻게 하면 좋을까요?‽ 보상

접근방식을 다각화하고 웹에서 빌드하는 방법을 모두 알아보겠습니다.

데모를 만들고 링크를 트윗하여 추가하면 됩니다. 아래 커뮤니티 리믹스 섹션을 공유해 주세요

커뮤니티 리믹스

표시할 내용이 없습니다.

리소스

GitHub의 소스 코드