CSS 버튼 스타일 안내서

This is the ninth post in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer. Visit ModernCSS.dev to view the whole series and additional resources.

이 안내서는 링크와 단추 요소에 대한 접근 가능하고 확장 가능한 단추의 외관을 어떻게 설계하는지 연구할 것이다.
포함된 항목은 다음과 같습니다.

재설정a 및 button 스타일

디스플레이, 시각, 크기 및 텍스트 스타일

무장애 조형 주의사항

일반적인 장면의 확장 스타일

오, 단추 (또는 링크?).정지가 며칠 지연된 이래로 나는 이미지 요정을 통해 두 번째 이미지가 불러오기를 기다렸다. 그리고 border-radius, box-shadow, 그리고 점차적으로 현장에 도착했을 때 나는 매우 큰 완화를 얻었다.
하지만우리는 버튼의 스타일 디자인을 너무 멀리 보았다. 가는 길 어딘가에서 버튼의 진정한 의미를 완전히 잊어버렸고, 접근할 수 있는 버튼(또는 링크)은 말할 것도 없었다.

STOP! Go read this excellent article: Links vs. Buttons in Modern Web Applications to understand when it's appropriate to use a versus button

우리는 시각적으로 a 및 button 단추의 외관을 만드는 데 필요한 속성과 단추를 만들고 사용하는 데 필요한 다른 세부 사항을 연구할 것이다.

기본 스타일 재설정

이것은 우리가 크롬에서 보여준 기선-본체 브라우저 스타일입니다. 지금까지 유일한 변화는 링크가 주체에 설정된 사용자 정의 글꼴을 계승하는 것입니다. 저는 또한 개선했습니다font-size.

만약 당신이 집에서 놀고 있다면, HTML은 다음과 같다.

<a href="javascript:;">Button Link</a>
<button type="button">Real Button</button>

나는 javascript:; 문자열로 href 값을 표시한다. 그러면 우리는 내비게이션을 터치하지 않는 상황에서 상태를 테스트할 수 있다.이와 유사하게, 이 단추는 폼 제출에 사용되지 않기 때문에, get 요청과 페이지를 다시 불러오는 것을 방지하기 위해 현식 형식 button 이 필요합니다.

스타일 재설정

Note: Typically I apply the Normalize reset to CodePens, but for this lesson we are starting from scratch to learn what is required to reset for buttons and links. Use of Normalize or other popular resets do some of these things for you.

우선, 우리는 button 클래스를 링크와 단추에 추가합니다. 단지 본 수업에서 응용 스타일의 위치를 강조하기 위해서입니다.

<a href="javascript:;" class="button">Button Link</a>
<button type="button" class="button">Real Button</button>

상자 크기

당신의 스타일에 다음 리셋이 포함되어 있는지 확인하십시오. - 만약 당신이 전체 국면을 원하지 않는다면, 당신은 우리의 단추 종류까지 범위를 넓힐 수 있습니다.

* {
  box-sizing: border-box;
}

간단히 말하면, 이 규칙은 테두리와 채우기 같은 일이 예상한 요소의 크기를 확장하는 것을 방지한다. 예를 들어 25%의 너비는 25% + 테두리 너비 + 채우기가 아니라 25% 이다.

하나

링크의 경우 리셋을 한 번만 수행하면 됩니다.

a.button {
  text-decoration: none;
}

이것은 밑줄을 삭제할 뿐입니다.

버튼

이제 버튼을 재설정하려면 더 많은 규칙이 필요합니다.

button.button {
  border: none;
  background-color: transparent;
  font-family: inherit;
  padding: 0;
  cursor: pointer;

  @media screen and (-ms-high-contrast: active) {
    border: 2px solid currentcolor;
  }
}

브라우저 간의 값display도 약간의 차이가 있지만, 우리는 곧 그것을 유일한 옵션으로 변경할 것이다.
이러한 리셋 스타일이 있으면 다음과 같은 모양을 갖게 됩니다.

Windows 고대비 모드를 사용하는 사용자가 단추 테두리를 감지할 수 있도록 솔루션을 제공해 주셔서 감사합니다.

디스플레이 스타일

많은 장면에서 가장 효과가 좋은 것은 display: inline-flex 이다. 이것은 우리에게 flexbox의 내용 정렬 기능을 제공하지만 DOM의 inline-block 행위에 있다.

a.button,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

나중에 아이콘을 추가하거나 폭 제한을 적용하면 Flex alignment가 편리합니다.

비주얼 스타일

다음에 우리는 표준적인 시각 양식을 응용할 것입니다. 당신은 당연히 자신의 입맛에 따라 조정할 수 있습니다.이것은 가장 유연한 스타일입니다. box-shadow 및/또는border-radius을 생략할 수 있습니다.

$btnColor: #3e68ff;

a.button,
button.button {
  // ... existing styles
  background-color: $btnColor;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
}

이제 우리의 링크와 단추는 더욱 비슷해지기 시작했다.

버튼 명암비

초기 버튼 스타일을 작성할 때 두 레벨의 명암비와 관련됩니다.

버튼 배경색과 표시 배경 사이의 비율은 최소 3:1

버튼 텍스트와 버튼 배경 사이의 최소 4.5:1(18.66px 굵기 또는 24px 이하의 텍스트) 또는 3:1(이 도량 값보다 큰 텍스트)

다음은 버튼 색상이 명암비와 어떻게 연관되는지 보여주는 정보도입니다.

페이지 배경이 흰색이라고 가정하면 버튼 색상은 4.54:1로 선택됩니다.

Try out ButtonBuddy to create accessible button colors. This web app I created will help get all the vectors of contrast right across your button color palette.

크기

"비주얼"분류에서 일부러 속성을 생략했습니다. 진도 화면 캡처를 보았을 때 놓쳤을 수도 있습니다. padding.padding은box-model의 일부이기 때문에 크기로 유지합니다.
크기 값을 적용하고 다음을 논의합니다.

a.button,
button.button {
  // ... existing styles
  padding: 0.25em 0.75em;
  min-width: 10ch;
  min-height: 44px;
}

우리는 padding 단위 응용 프로그램 em 을 사용합니다. 이것은 채우기와 응용 프로그램 font-size 의 크기를 비례적으로 조정할 수 있는 기본 설정입니다.
다음은 min-width 단원 설정ch을 사용합니다. 이 단원은 대체적으로 글꼴을 응용한 0 문자의 너비와 font-size 같습니다.본 건의는 시각 리듬 가드레일입니다.만약 당신이 두 개의 나란히 있는 단추를 가지고 있다면, 하나는 짧고 하나는 길다. 예를 들어'공유'와'더 많은 것을 안다'이다.만약 min-width 이 없다면,'공유'단추는 갑자기'더 많은 것을 알기'보다 짧아질 것이다.min-height 확인 버튼이 터치 장치에서 충분한 목표임을 바탕으로 2.5.5 - Target Size의 WCAG 2.1 성공 기준을 충족시킵니다.
이러한 스타일이 한데 융합되기 시작했지만 우리는 아직 완성하지 못했다.

문자 스타일

이전 진행 화면 캡처에 따라 텍스트 스타일을 건너뛰려고 시도할 수 있습니다.
하지만 뷰포트 크기를 줄이고 응답 동작을 트리거할 때 어떤 일이 일어나는지 살펴보십시오.

보시다시피 우리는 서로 다른 정렬 방식이 있고 조정할 수 있습니다 line-height.
나는 일부러 리셋 스타일에서 텍스트 정렬 방식을 복구하는 것을 건너뛰었기 때문에, 지금 우리는 둘 다 가운데에 있는지 확인해야 한다.그리고 우리는 줄 높이를 줄일 수 있다. - 이것은 사용하는 글꼴에 따라 조정해야 할 수도 있다.

a.button,
button.button {
  // ... existing styles
  text-align: center;
  line-height: 1.1;
}

좋아, 좋아 보여!

상태 스타일

현재 사용자가 단추와 상호작용을 시도할 때 받는 유일한 시각적 피드백은 커서가 바늘로 변하는 것이다.
우리는 세 개의 주가 존재하는 것을 확보해야 한다.

서스펜션

통상적으로 가장 주목받는 것은 hover이기 때문에 우리는 여기서부터 시작한다.
서스펜션의 전형적인 업데이트는 배경색을 바꾸는 것이다.우리는 이미 4.5에 가까워졌기 때문에, 우리는 색깔을 어둡게 하고 싶다.
Sass를 사용하여 시각적 섹션에 정의된 변수$btnColor를 사용하여 색상을 계산할 수 있습니다.

a.button,
button.button {
  // ... existing styles
  &:hover {
    background-color: scale-color($btnColor, $lightness: -20%);
  }
}

효과가 약간 조화롭지 못하지만, 우리는 이 점을 부드럽게 하기 위해 또 다른 현대 CSS 도구를 가지고 있다. 적절하게 이름하여 transition 라고 한다.transition 규칙 외에 hover 속성을 추가해서 "over"와 "out"에 적용해야 합니다.

a.button,
button.button {
  // ... existing styles

  transition: 220ms all ease-in-out;

  // ...&:hover
}

초점

키보드 사용자의 경우 focus 상태를 명확하게 식별해야 합니다.
기본적으로 브라우저는 포커스를 받은 요소에 대해 "오래"효과를 적용합니다.나쁜 방법은 이 효과가 나타나는 outline 속성을 간단하게 삭제하지만 바꿀 수 없다는 것이다.
우리는 요강을 사용box-shadow의 사용자 정의 초점 상태로 대체할 것이다.outline와 유사하게, box-shadow 전체 요소의 크기를 변경하지 않기 때문에 레이아웃 변화를 초래하지 않습니다.그리고 우리는 이미 transition 을 응용했기 때문에 box-shadow 또한 그것을 계승하여 추가적인 주의력 효과를 얻을 것이다.

a.button,
button.button {
  // ... existing styles

  // ...&:hover

  &:focus {
    outline-style: solid;
    outline-color: transparent;
    box-shadow: 0 0 0 4px scale-color($btnColor, $lightness: -40%);
  }
}

우리는 scale-color 함수를 다시 사용했는데, 이번에는 hover 색깔보다 더 어둡다.버튼이 hover 및 focus 상태일 수 있기 때문입니다.

Windows 고대비 모드를 사용하는 사용자에게 감지 가능 :focus 상태를 보장하는 솔루션을 제공해 주셔서 감사합니다.

활동

마지막으로, 특히 "실제 단추"에 대해서는 :active 상태 스타일을 정의하는 것이 가장 좋다.
링크의 경우 아래를 클릭하거나 클릭하는 동안 일시적으로 나타납니다.
버튼의 경우 스페이스 바를 사용하여 버튼을 트리거할 수 있는 경우 더 긴 시간을 표시하고 스페이스 바를 무제한으로 누를 수 있습니다.
기존 :active 스타일에 추가됩니다 :hover:

&:hover,
&:active {
  background-color: scale-color($btnColor, $lightness: -20%);
}

스타일 변화

아웃라인("유령") 단추의 테마는 다른 날의 테마이지만, 두 가지 변형을 빠르게 추가할 것입니다.

작은 단추

경계원 형식을 사용하면 글꼴 크기를 간소화하기 위해 button--small 클래스를 만들 것입니다.패딩을 em 로 설정하기 때문에 크기를 비례에 따라 조정합니다.우리의 min-height 버튼은 충분한 터치 목표를 유지할 수 있도록 확보할 것이다.

&--small {
  font-size: 1.15rem;
}

차단 버튼

인라인 대신 block 비헤이비어를 원하는 경우가 있으므로 width: 100% 도구를 변경하는 대신 display 옵션을 추가할 것입니다. 단추 내용의 탄력적인 정렬을 원하기 때문입니다.

&--block {
  width: 100%;
}

Gotcha: Flex 열의 하위 레벨

이 경우, 단추는 flex열의 하위 레벨입니다. button--block 클래스가 없더라도 단추가 전체 너비로 확장될 때 당황할 수 있습니다.
이러한 상황을 방지하기 위해 기본 버튼 스타일에 align-self: start 을 추가하거나 각 유연성/격자 정렬 특성 값 start, center 및 end 에 대한 유틸리티 스타일을 만들 수 있습니다.

프레젠테이션