찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >현대 CSS 버튼의 기본 사항에 대한 소개

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

Christopher Nolan
Christopher Nolan원래의
2025-02-21 12:04:16368검색

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
      를 사용하면 물체 주위에 그림자를 추가 할 수 있습니다. 독특한 그림자를 각면에 추가 할 수 있으며 평평한 UI 및 재료 설계는 아이디어를 활용합니다. 에 대한 자세한 내용은 mdn 문서를 확인하십시오.
    1. 기본 요소 3- 전송 기간 를 사용하면 CSS 변경에 대한 시간 척도를 추가 할 수 있습니다. 변환 시간이없는 버튼은 즉시 CSS로 변경되며 사용자에게 불쾌감을 줄 수 있습니다. 이 안내서의 많은 버튼은 전환 시간을 사용하여 자연스러운 느낌을 만듭니다.
      2. 다음 예제는 버튼 스타일을 부드러운 방식으로 (0.5 초 이상) 변환합니다.
    2. 변환을 실행하는 코드는 복잡하므로 이전 브라우저는 변환을 약간 다르게 처리합니다. 따라서 구형 브라우저에 대한 공급 업체 접두사를 포함해야합니다. 기본 버튼 스타일을 삭제하십시오
      3. 요소에서 기본 브라우저 스타일을 제거하려면 사용자 지정 스타일을 제공 할 수 있도록 다음 CSS를 포함합니다.
    그러나 기본적으로 모든 버튼이 아닌 버튼 요소의 클래스에 적용하는 것이 좋습니다.

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

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

    <code class="language-css">.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;
}</code>
    위의 스타일에서는 변환 기간 동안 글꼴과

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

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

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

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

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

    CSS 변수는 새로운 것이 아니지만 일부는 새로운 방식으로 사용됩니다. 는 단단한 균일 한 선이 아니지만

    , 및 

    <code class="language-css">transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */</code>
    를 사용하여 3D 깊이 효과를 만듭니다.

    플랫 ui 버튼은 널리 사용됩니다 :hover. 예제 버튼이

    3px에서 1px로 변경됩니다. 따라서 버튼 아래의 그림자가 수축되고 전체 버튼 객체를 여러 픽셀로 아래로 이동시킵니다. 간단하지만이 변경 사항은 사용자가 버튼을 페이지로 클릭한다고 느끼는 데 도움이됩니다. :hover <.> 색상이 변경됩니다. 배경색이 어두워지면서 사용자로부터 물리적으로 움직임을 시뮬레이션하고 페이지에 들어갑니다. 이 미묘한 변경은 사용자에게 버튼을 클릭하고 있음을 상기시킵니다.

    플랫 UI 버튼은 큰 이야기를하는 간단하고 최소한의 움직임을 가치가 있습니다. 많은 사람들이 를 사용하여 얕은 움직임을 만듭니다. 일부 플랫 UI 버튼은 전혀 움직이지 않으며 색상 변경을 활용하는 것만으로 주목할 가치가 있습니다. border 3 - 재료 설계 border-bottom 재료 설계는 정보 카드를 홍보하고 매력적인 행동을 특징으로하는 설계 개념입니다. Google은 "재료 디자인"의 개념을 설계하고 재료 디자인 홈페이지에 세 가지 주요 원칙을 나열했습니다. border-left 재료는 은유 입니다 굵은, 그래픽, 목적 border-right 스포츠는 의미를 준다

    이 세 가지 원칙을 더 잘 이해하기 위해 재료 설계의 실제 적용을 살펴 보겠습니다.

    참고 :이 예제는 폴리머 버튼 기본 태그를 따르기 때문에 :active 태그가 포함되어 있지 않지만 대규모 프로젝트에서 중합체를 구현하면 구현에서 :active 태그 사용을 탐색하는 것이 좋습니다.

    태그 대신 우리는 이것을 향후 기사에서 더 자세히 살펴볼 것입니다.
      이 버튼은 두 가지 주요 아이디어 -

      와 폴리머를 사용합니다. box-shadow 중합체는 웹 사이트를 설계하는 데 도움이되는 구성 요소와 도구의 프레임 워크입니다. 부트 스트랩에 익숙하다면 폴리머는 매우 유사합니다. 위에서 볼 수있는 강력한 파급 효과는 한 줄의 코드로 추가 할 수 있습니다.

      는 중합체 성분입니다. HTML의 시작 부분에서 중합체를 가져 오면 인기있는 프레임 워크 및 해당 구성 요소에 액세스 할 수 있습니다. 폴리머 프로젝트 홈페이지에 대해 자세히 알아보십시오. 
      <code class="language-css">.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;
}</code>
      이제 우리는 폴리머가 무엇인지, 잔물결이 어디에서 나오는지 이해하기 때문에 (어떻게 작동 하는가는 다른 이야기입니다), 버튼을 돋보이게하는 재료 설계 원칙을 구현하는 데 도움이되는 CSS를 논의합시다.

      <paper-ripple fit></paper-ripple> 이 버튼은

      를 사용하여 대부분의 디자인을 달성합니다. 변하지 않는 CSS를 제거하여 가 어떻게 변하고 마술을 연주하는지 살펴 보겠습니다.

      각 버튼의 왼쪽과 하단에 얇은 그림자를 놓는 데 사용됩니다. 클릭하면 그림자가 더 확장되고 덜 어두워집니다. 이 작업은 버튼의 3D 그림자가 페이지에서 사용자로 점프합니다. 이 동작은 재료 설계 스타일과 실제 응용 분야의 일부입니다. 
      <code class="language-css">transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */</code>
      재료 설계 버튼은 폴리머를

      효과와 결합하여 만들 수 있습니다. box-shadow box-shadow 재료는 은유입니다. 를 사용하면 실제 객체 에 나타나는 3D 그림자를 시뮬레이션 할 수 있습니다. 대담하고, 그래픽, 목적 - 이것은 밝은 파란색과 녹색 버튼에 더 현실적이며,이 버튼은 그것을 완전히 만족시킵니다.

      운동은 의미를 부여합니다 - 중합체와 
      <code class="language-css">button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}</code>
      변환을 사용하여 사용자가 버튼을 클릭하면 많은 움직임을 만들 수 있습니다.

      box-shadow 이 기사에서는 버튼을 만드는 세 가지 디자인 방법을 사용하는 방법에 대해 설명합니다. 나만의 버튼 디자인 프로토 타입을 만들려면 CSS3 버튼 생성기를 사용하는 것이 좋습니다.

      결론

      box-shadow 흑백 버튼은 간단하고 신뢰할 수 있습니다. 웹 사이트와 관련된 버튼에 빠르게 액세스하려면 흑백을 브랜드 색상으로 교체하십시오. 플랫 UI 버튼은 간단하며 작은 액션과 색상을 사용하여 큰 이야기를합니다. Material Design 버튼은 대규모 복잡한 작업을 사용하여 실제 세계의 그림자를 시뮬레이션하여 사용자의 관심을 끌습니다.

      이 안내서가 CSS 초보자가 버튼을 강력하고 창의적으로 만드는 빌딩 블록을 이해하는 데 도움이되기를 바랍니다.

위 내용은 현대 CSS 버튼의 기본 사항에 대한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css bootstrap css3 html 指针 并发 对象 选择器 display padding border 伪类 background transform transition animation ui
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：더 나은 서체 페어링을위한 20 가지 영감, 무료 도구다음 기사：더 나은 서체 페어링을위한 20 가지 영감, 무료 도구

관련 기사

더보기