CSS 버튼 스타일 예제

기본 버튼 스타일은 파란색 배경을 사용하여 간단한 기본 버튼을 제공하고 어두워지는 효과를 제공합니다. 2. 테두리 버튼은 투명한 배경과 파란색 테두리를 채택하며, 가공 할 때 배경이 채워지며, 이는 보조 작업에 적합합니다. 3. 둥근 코너 버튼은 그림자를 추가하고 움직임 그림을 클릭하여 질감과 대화식 피드백을 향상시킵니다. 4. 그라디언트 버튼은 주황색 파우더 선형 구배를 사용하여 시각적으로 두드러지고 액션 통화 장면에 적합합니다. 5. 아이콘 버튼은 텍스트와 아이콘을 결합하여 Flex 레이아웃을 통해 그래픽 정렬을 달성하여 인식을 향상시킵니다. 6. 비활성화 버튼은 회색 모양을 나타 내고 커서를 비활성화하여 작동 할 수없는 상태를 나타냅니다. 7. 충동 애니메이션 버튼은 의사 요소를 통해 지속적으로 애니메이션을 확대하고 사라져서 사용자를 클릭 할 수 있습니다. 전환 효과 및 CSS 변수를 균일하게 관리하기 위해 조정하는 것이 좋습니다. 클릭 가능성을 보장하기 위해 모바일 버튼의 크기가 44px 이상이 아닙니다.

물론 아래는 기본에서 고급까지 일반적인 CSS 버튼 스타일 예제입니다. 다른 시나리오에서 사용하기에 적합합니다. 이 스타일은 프로젝트에 직접 복사하여 필요에 따라 조정할 수 있습니다.

1. 기본 버튼 스타일 (기본 버튼)

 .btn {
  패딩 : 10px 20px;
  글꼴 크기 : 16px;
  색상 : 흰색;
  배경색 : #007bff;
  국경 : 없음;
  Border-Radius : 5px;
  커서 : 포인터;
  전환 : 배경색 0.3S 편의;
}

.BTN : 호버 {
  배경색 : #0056B3;
}

대부분의 웹 페이지의 기본 버튼은 간단하고 명확합니다.

2. 테두리 버튼 (개요 버튼)

 .btn-outline {
  패딩 : 10px 20px;
  글꼴 크기 : 16px;
  색상 : #007bff;
  배경색 : 투명;
  국경 : 2px Solid #007Bff;
  Border-Radius : 5px;
  커서 : 포인터;
  전환 : 모든 0.3 초의 용이성;
}

.btn-outline : 호버 {
  배경색 : #007bff;
  색상 : 흰색;
}

"취소"또는 "반환"과 같은 보조 작업에 일반적으로 사용됩니다.

3. 둥근 버튼 그림자 (텍스처 포함)

 .btn- 상승 {
  패딩 : 12px 24px;
  글꼴 크기 : 16px;
  색상 : 흰색;
  배경색 : #28A745;
  국경 : 없음;
  Border-Radius : 8px;
  Box-Shadow : 0 4px 6px rgba (0, 0, 0, 0.1);
  커서 : 포인터;
  전환 : 모든 0.3 초의 용이성;
}

.btn-raised : hover {
  배경색 : #218838;
  변환 : Translatey (-2px);
  Box-Shadow : 0 6px 8px rgba (0, 0, 0, 0.15);
}

.btn-raised : Active {
  변환 : Translatey (0);
  Box-Shadow : 0 2PX 4PX RGBA (0, 0, 0, 0.1);
}

그림자를 추가하고 피드백을 클릭하여 상호 작용을 향상시킵니다.

4. 그라디언트 버튼

 .btn- 그라디언트 {
  패딩 : 12px 24px;
  글꼴 크기 : 16px;
  색상 : 흰색;
  배경 : 선형 그레이드 (90deg, #ff7a00, #ff0080);
  국경 : 없음;
  Border-Radius : 25px;
  커서 : 포인터;
  전환 : 불투명도 0.3S 편의;
}

.btn- 그라디언트 : 호버 {
  불투명도 : 0.9;
}

시각적 영향이 강하고 "지금 구매"와 같은 CTA (Call to Action) 버튼에 적합합니다.

5. 아이콘 버튼 (아이콘 포함)

 .btn-icon {
  디스플레이 : 인라인-플렉스;
  정렬 구조 : 센터;
  갭 : 8px;
  패딩 : 10px 16px;
  글꼴 크기 : 16px;
  색상 : 흰색;
  배경색 : #007bff;
  국경 : 없음;
  Border-Radius : 6px;
  커서 : 포인터;
}

.btn-icon : 호버 {
  배경색 : #0056B3;
}

 <button class = "btn-icon">
  <span>? </span>
  좋아요 </button>

공유, 좋아요 등과 같은 그림과 텍스트의 조합이 필요한 버튼에 적합합니다.

6. 상태 버튼을 비활성화합니다

 .btn disabled {
  패딩 : 10px 20px;
  글꼴 크기 : 16px;
  색상 : #6C757D;
  배경색 : #e9ecef;
  국경 : 없음;
  Border-Radius : 5px;
  커서 : 말도 안됩니다.
  불투명도 : 0.6;
}

양식이 채워지지 않은 것과 같은 클릭 불가 지위에 사용됩니다.

7. 맥박 애니메이션 버튼 (클릭 수치)

 .btn-pulse {
  위치 : 상대;
  패딩 : 12px 24px;
  글꼴 크기 : 16px;
  색상 : 흰색;
  배경색 : #DC3545;
  국경 : 없음;
  Border-Radius : 5px;
  커서 : 포인터;
}

.btn-pulse :: 이후 {
  콘텐츠: '';
  위치 : 절대;
  상단 : 50%;
  왼쪽 : 50%;
  너비 : 30px;
  높이 : 30px;
  배경 : RGBA (220, 53, 69, 0.4);
  국경-라디우스 : 50%;
  변환 : 번역 (-50%, -50%);
  애니메이션 : 펄스 1.5S 무한;
}

@keyframes 펄스 {
  0% {
    변환 : 번역 (-50%, -50%) 척도 (0.8);
    불투명도 : 0.7;
  }
  100% {
    변환 : 번역 (-50%, -50%) 척도 (2.4);
    불투명도 : 0;
  }
}

사용자의 관심을 끌기 위해 "지금 등록"과 같은 중요한 버튼에 사용됩니다.

팁

• transition 사용하여 버튼 상호 작용을보다 자연스럽게 만듭니다.
• 사용자 경험을 방해하지 않도록 애니메이션의 과도한 사용을 피하십시오.
• 모바일 터미널의 버튼 크기에주의하십시오 (최소 44px 높이가 권장됨).
• CSS 변수로 색상과 크기를 균일하게 관리 할 수 있습니다.

 : 루트 {
  -Btn-Primary : #007bff;
  -BTN-SUCCESS : #28A745;
  -Btn-Radius : 5px;
}

기본적으로 복잡하지는 않지만 세부 사항을 무시하기는 쉽습니다. 브랜드 스타일에 따라 이러한 스타일을 사용할 수 있습니다.

위 내용은 CSS 버튼 스타일 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!