CSS를 통해 다양한 효과를 지닌 버튼을 만드는 방법

CSS를 통해 다양한 버튼 효과를 얻을 수 있습니다. 예를 들어 CSS 그라데이션 속성을 통해 색상 그라데이션 효과 버튼을 설정할 수 있고, box-shadow를 통해 버튼 누르기 효과를 얻을 수 있습니다. 이 기사에서는 플랫, 테두리, 그라디언트, 그림자 및 누르기 스타일 버튼 등 다양한 스타일의 버튼 효과를 제공합니다. 다음 기사에서는 CSS 코드를 통해 효과를 얻는 방법을 자세히 소개합니다.

HTML code

<div class="pm">
	<button>平面按钮</button>
</div>

기본 CSS 스타일 코드

button{
display: inline-block;
margin: 0 10px 0 0;
padding: 15px 45px;
font-size:20px;
font-family:"Bitter",serif;
line-height: 20px;
appearance: none;
 box-shadow:none;
 border-radius: 0;
}

(1) 플랫 스타일 CSS 버튼

플랫 스타일 버튼의 사용은 이제 매우 인기가 있으며 유비쿼터스 플랫과 일치합니다. 디자인 트렌드. , 이러한 플랫 스타일 버튼은 멋지게 보입니다. 다음 코드는 버튼의 정상적인 상태입니다.

.pm button {
  color:#fff;
  background-color:#6496c8;
  border:none;
}

Rendering:

(2) 테두리 스타일 CSS 버튼

테두리 스타일 버튼은 플랫 버튼과 동일한 카테고리에 속합니다. 유일한 차이점은 플랫 버튼에 사용된 배경색 대신 테두리를 사용한다는 것입니다. 다음 코드는 버튼의 일반 상태입니다.

.pm button {
  color:#444;
 border:5px solid #6496c8;
  background-color: #fff;
}

Rendering:

(3) 그라데이션 및 그림자 스타일 CSS 버튼

이 그라데이션 및 그림자 스타일 버튼은 우리가 수행한 작업과 더 일치합니다. 과거에는 낮에 본 버튼 효과입니다. 다채로운 색상을 좋아한다면 그라데이션/그림자 스타일 버튼이 적합합니다. 이 버튼을 만들 때 좋은 점은 효과가 모두 CSS에서 수행되므로 해상도 손실이나 새 이미지를 생성할 필요 없이 쉽게 크기를 늘리거나 줄일 수 있다는 것입니다. 다음 코드는 버튼의 정상적인 상태입니다

.pm button {
  color:#fff;
  text-align: center;
  box-shadow:inset 0 0 0 1px #e91e637d; 
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, rgb(244,103,34), rgb(197,29,124));
  background: -moz-linear-gradient(right, rgb(244,103,34), rgb(197,29,124)); 
  background: linear-gradient(to right, rgb(244,103,34) , rgb(197,29,124));}
}

Rendering:

(4) Press Style CSS Button

이러한 "press" 스타일 버튼은 일부 평면 디자인과 환상을 결합하여 사용자를 만듭니다. 실제로 버튼을 누른 것처럼 느껴집니다. 사용자가 이 버튼을 누르면 페이지에 멈춰 있는 것처럼 보입니다. 이를 구현하려면 그림자를 사용하여 3D 팝업 모양을 제공하도록 설정해야 합니다. 다음 코드는 버튼의 정상적인 상태입니다

.pm button {
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px #27496d;
}

Rendering:

요약: 위 내용이 이 글의 전체 내용입니다. 이 글을 통해 모두가 CSS를 사용하여 버튼을 만드는 방법을 배울 수 있기를 바랍니다. 효과.

위 내용은 CSS를 통해 다양한 효과를 지닌 버튼을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!