HTML의 input type="button"은 제출(submit) 버튼 또는 초기화(reset) 버튼으로 사용할 수 있습니다. CSS를 활용하면 웹 페이지의 모든 버튼을 자유롭게 디자인하고 스타일을 적용할 수 있습니다.
아래 예제 코드를 실행하면 input type="submit" 요소에 스타일을 적용하는 방법을 직접 확인할 수 있습니다.
CSS로 제출 버튼 스타일 지정하기
속성 선택자 input[type = submit]을 사용하면 페이지 내의 모든 제출 버튼에 일관된 스타일을 적용할 수 있습니다. 아래 예제에서는 배경색, 테두리, 여백, 커서 등 다양한 속성을 활용해 버튼을 꾸며보았습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
input[type = submit] {
background-color: orange;
border: none;
text-decoration: none;
color: white;
padding: 20px 20px;
margin: 20px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<p>아래 양식을 작성해 주세요.</p>
<form>
<label for = "subject">과목</label>
<input type = "text" id="subject" name="sub"><br><br>
<label for = "student">학생</label>
<input type = "text" id = "student" name = "stu"><br>
<input type = "submit" value = "제출">
</form>
</body>
</html>주요 스타일 속성 설명
- background-color: 버튼의 배경색을 주황색(orange)으로 지정합니다.
- border: none: 기본 테두리를 제거하여 깔끔한 외관을 만듭니다.
- color: white: 버튼 텍스트 색상을 흰색으로 설정하여 가독성을 높입니다.
- padding / margin: 버튼 내부 여백과 외부 간격을 조절합니다.
- cursor: pointer: 마우스를 올렸을 때 포인터 커서가 표시되어 클릭 가능함을 알려줍니다.
이처럼 CSS 속성 선택자를 활용하면 별도의 클래스나 ID 없이도 특정 입력 유형의 버튼에 손쉽게 스타일을 적용할 수 있습니다.