CSS 버튼 스타일 코드를 첨부하여 CSS 버튼을 만드는 다양한 방법 공유

프로젝트에서 거의 모든 웹사이트는 12개에서 몇 개에 이르는 버튼을 사용합니다. 실용적이고 보기 좋은 버튼은 페이지에 많은 색상을 추가하여 사용자의 관심을 끌 수 있습니다. 이 기사에서는 주로 CSS 버튼의 다양한 작성 방법과 CSS 버튼의 미화에 대해 설명합니다. 마지막으로 참조용으로 일반적인 CSS 버튼 스타일 코드가 표시됩니다. 좋아요, 계속 읽어보세요!

1. CSS 버튼을 작성하는 다양한 방법

CSS 버튼은 버튼으로 직접 작성할 수 있고, 태그를 사용하여 작성할 수도 있고, 입력을 사용하여 작성할 수도 있습니다. 물론 div를 사용할 수도 있습니다. 각 태그의 특성에 맞게 다양한 스타일을 사용하여 원하는 대로 설정하세요. 예를 들어, a 태그가 포함된 버튼을 작성하는 경우에는 반드시 text-꾸밈: 없음 속성을 사용하게 됩니다. 버튼을 사용하여 아름답게 작성하는 경우에는 테두리: 없음 등의 속성을 사용할 수 있습니다.

1. 버튼 버튼(스타일 없음)

<button>默认按钮</button>

2. 라벨 버튼 하이퍼링크

<a href="#" class="button">链接按钮</a>

3. 버튼 버튼(스타일 있음)

.button {
       background-color: #4CAF50;
       color: white;
       padding: 15px 32px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 16px;
   }

4. 버튼

<button class="button">按钮</button>

CSS 부분:

.button {
       background-color: #4CAF50;
       border: none;
       color: white;
       padding: 15px 32px;
       text-align: center;
       font-size: 16px;
       cursor: pointer;
   }

Rendering:

2. 일반적인 CSS 버튼 스타일 코드

사용자가 이 버튼을 클릭하면 오른쪽 그림이 나타납니다. 효과는 배경색이 어두워지고 버튼 주변의 그림자가 내부 그림자가 되는 것입니다.

<input type="button" class="button" value="输入框按钮">

사진 디스플레이:

위에서는 버튼을 만드는 데 어떤 방법을 사용할 수 있는지, 아름다운 모양을 위해 어떤 스타일을 설정할 수 있는지 소개합니다. 마지막으로 학습자의 참고를 위해 예시를 제공합니다!

위 내용은 CSS 버튼 스타일 코드를 첨부하여 CSS 버튼을 만드는 다양한 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!