현대 CSS 버튼의 기본 사항에 대한 소개-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

현대 CSS 버튼의 기본 사항에 대한 소개

Christopher Nolan

Feb 21, 2025 pm 12:04 PM

An Introduction to the Basics of Modern CSS Buttons

웹 페이지 버튼 디자인 : 세 가지 스타일 및 CSS 구현 이 기사는 2016 년 7 월 9 일에 업데이트되었으며 최신 접근성 모범 사례를 준수하기 위해

태그를 태그로 대체했습니다. 버튼에서 작업하는 경우 항상 태그를 고수하십시오.

버튼은 모든 웹 페이지의 가장 중요한 구성 요소 중 하나이며 다양한 상태와 기능이 있으며, 이는 모두 이전 설계 결정과 올바르게 일치해야합니다. 이 기사에서는 CSS 코드 및 도구와 함께 3 가지 버튼 디자인 개념을 소개하여 새로운 개발자가 자체 버튼을 만들도록 도와줍니다.

다양한 버튼 디자인 개념을 탐구하기 전에 CSS 버튼에 대한 몇 가지 기본 지식을 검토해야합니다. 어떤 CSS 구성 요소가 변경 될지 모른다면 평평한 UI와 재료 설계의 사고 차이를 이해하는 것은 의미가 없습니다. <a></a> CSS 버튼의 기본 사항을 빠르게 검토합시다. <button></button> <button></button> 키 포인트

태그 사용은 최신 접근성 모범 사례에서 버튼을 처리하는 권장되는 방법입니다.

좋은 버튼 디자인은 접근성을 보장해야하며, 장애가있는 사람들과 이전 브라우저를 사용하는 사용자가 버튼에 쉽게 액세스 할 수 있어야하며, 간단한 텍스트를 포함하여 사용자가 버튼의 목적을 즉시 이해할 수 있도록 간단한 텍스트를 포함해야합니다.

버튼 디자인의 세 가지 주요 기본 요소는 색상, 그림자 및 전환 시간이며 및 와 같은 CSS 의사 클래스를 사용하여 작동 할 수 있습니다.

이 기사는 각각 고유 한 설계 방법을 갖춘 간단한 검은 색과 흰색 버튼, 플랫 UI 버튼 및 재료 설계 버튼의 세 가지 버튼 스타일의 예를 제공합니다.

자신만의 버튼 디자인을 만들려면 CSS3 버튼 생성기와 같은 도구를 사용하는 것이 좋습니다. CSS 버튼 기본

좋은 버튼의 정의는 웹 사이트마다 다르지만 비 기술적 표준이 있습니다.

- 이것이 가장 중요한 것입니다. 버튼은 장애인과 구형 브라우저를 사용하는 사용자가 쉽게 액세스 할 수 있어야합니다. 네트워크의 개방성은 아름답습니다. 부주의 한 CSS로 파괴하지 마십시오. <button></button> 단순 텍스트

온라인에서 볼 수있는 거의 모든 버튼은 색상 변경, 변환 시간 및 국경 및 그림자 변경의 변형을 사용합니다. 이들은 다양한 CSS 의사 클래스를 사용하여 악용 할 수 있습니다. 우리는 그들 중 두 가지에 초점을 맞출 것입니다 -

와 . pseudo-class는 마우스가 물체 위로 떠날 때 CSS가 어떻게 변해야하는지 정의합니다. 마우스 버튼을 누르고 마우스 버튼을 릴리스하는 사용자 사이에서 가장 자주 수행됩니다. :hover 버튼의 전체 표시는 의사 클래스를 사용하여 변경할 수 있지만 사용자 친화적 인 접근 방식은 아닙니다. 초보자에게 좋은 전략은 버튼을 익숙하게 유지하면서 버튼의 기본 요소를 작거나 간단하게 변경하는 것입니다. 버튼의 세 가지 주요 기본 요소는 색상, 그림자 및 변환 시간입니다.

기본 요소 1— 콜러 이것은 가장 일반적인 변화입니다. 우리는 다양한 속성의 색상을 변경할 수 있으며, 가장 간단한 속성은

및 속성입니다. 예제로 점프하기 전에 먼저 버튼 색상을 선택하는 방법에 초점을 맞추겠습니다.

색상 조합

- 보완 색상을 사용하십시오. ColorHexa는 함께 사용할 수있는 색상을 찾는 훌륭한 도구입니다. 여전히 색상을 찾고 있다면 플랫 UI 색상 피커를 확인하십시오. color 팔레트와 일치 background-color - 일반적으로 사용중인 팔레트와 일치하는 것이 가장 좋습니다. 여전히 색상 팔레트를 찾고 있다면 Lolcolors를 확인하십시오. border

기본 요소 2— Shadow

기본 요소 3- 전송 기간 를 사용하면 CSS 변경에 대한 시간 척도를 추가 할 수 있습니다. 변환 시간이없는 버튼은 즉시 CSS로 변경되며 사용자에게 불쾌감을 줄 수 있습니다. 이 안내서의 많은 버튼은 전환 시간을 사용하여 자연스러운 느낌을 만듭니다.

다음 예제는 버튼 스타일을 부드러운 방식으로 (0.5 초 이상) 변환합니다.

변환을 실행하는 코드는 복잡하므로 이전 브라우저는 변환을 약간 다르게 처리합니다. 따라서 구형 브라우저에 대한 공급 업체 접두사를 포함해야합니다. 기본 버튼 스타일을 삭제하십시오

요소에서 기본 브라우저 스타일을 제거하려면 사용자 지정 스타일을 제공 할 수 있도록 다음 CSS를 포함합니다.

그러나 기본적으로 모든 버튼이 아닌 버튼 요소의 클래스에 적용하는 것이 좋습니다.

CSS를 변경하는 방법을 수정하는 복잡하고 흥미로운 방법이 많이 있으며이 빠른 검토는 기본 사항 만 포함합니다.

3 개의 버튼 스타일 box-shadow box-shadow 1 - 간단한 흑백 버튼 이것은 일반적으로 단순성이 다양한 스타일로 작동하기 때문에 내 측면 프로젝트에 추가하는 첫 번째 버튼입니다. 이 스타일은 흑백의 자연스러운 완벽한 대비를 활용합니다. box-shadow 이 두 가지 변경 사항은 매우 유사하므로 흰색 배경이있는 검은 색 버튼으로 코드 만 소개합니다. 다른 버튼을 얻으려면 각 흰색과 검은 색을 뒤집습니다.

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

로그인 후 복사

위의 스타일에서는 변환 기간 동안 글꼴과

가 양방향으로 변경되는 것을 볼 수 있습니다. 이것은 매우 간단한 예입니다. 여기에서 구축하려면 좋아하는 브랜드의 색상을 영감으로 사용할 수 있습니다. Brandcolors를 사용하는 것은 이러한 유형의 브랜드의 색상을 찾는 좋은 방법입니다. background-color 2 - 플랫 ui 버튼 .2s Flat UI는 미니멀리즘에 중점을두고 작은 행동을 통해 큰 이야기를합니다. 프로젝트가 구체화되기 시작하면 일반적으로 검은 색과 흰색 버튼에서 평평한 UI 버튼으로 마이그레이션합니다. 평평한 UI 버튼은 대부분의 디자인에 적합 할 정도로 간단합니다.

3D 버튼을 시뮬레이션하기 위해 버튼 움직임을 추가하여 이전 버튼을 향상시킵니다.

이 예제에는 5 개의 버튼이 포함되어 있지만 유일한 변경 사항은 색상이므로 첫 번째 버튼에 중점을 둘 것입니다.

이 버튼에는 3 개의 상태가 있습니다.

에는 불투명도를 줄이기 위해 한 줄의 코드 만 포함한다는 점에 주목할 가치가 있습니다. 이것은 새로운 색상을 찾지 않고 버튼을 더 가볍게 보이게하는 유용한 트릭입니다.

CSS 변수는 새로운 것이 아니지만 일부는 새로운 방식으로 사용됩니다. 는 단단한 균일 한 선이 아니지만 , <🎜 및 transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */ -webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */ -moz-transition-duration: 0.5s; /* 帮助Firefox */ 로그인 후 복사 로그인 후 복사 를 사용하여 3D 깊이 효과를 만듭니다. 플랫 ui 버튼은 널리 사용됩니다 :hover. 예제 버튼이