이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!