이 글에서는 HTML을 이용해 간단한 버튼 스타일을 구현하는 방법을 주로 소개합니다.
웹 디자인 과정에서 버튼 설정은 가장 흔하고 기본적인 HTML/CSS 지식 기술이라고 할 수 있습니다.
추천 참고 영상 튜토리얼: "HTML Tutorial"
다음은 초보 친구에게 HTML을 사용하여 간단한 버튼 스타일을 구현하는 방법을 소개하는 코드 예제입니다.
버튼 버튼 스타일코드 예시는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>button按钮样式</title> <style> .button1 { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 16px 32px; text-align: center; background-color: white; color: black; border: 2px solid #4CAF50; border-radius:5px; } .button1:hover { background-color: #4CAF50; color: white; } </style> </head> <body> <button class="button1">Green</button> </body> </html>
효과는 다음과 같습니다.
관련 속성 소개:
transition-duration 속성은 걸리는 시간을 지정합니다. 전환 효과를 완성하려면 -webkit -transition-duration 속성은 브라우저 Safari와의 호환성을 위한 것입니다.
text-align 속성은 요소 내 텍스트의 가로 정렬을 지정합니다. center 값은 텍스트가 가로 가운데에 정렬됨을 의미합니다.
border-radius 속성을 사용하면 요소에 둥근 테두리를 추가할 수 있습니다.
:hover 선택기는 마우스 포인터가 떠 있는 요소를 선택하는 데 사용됩니다. 간단히 말하면 마우스가 지정된 요소로 이동할 때 새로운 스타일을 설정합니다.
관련 태그 소개:
여기에서는 본문에
위 내용은 HTML을 사용하여 간단한 버튼 스타일을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!