728x90
버튼을 호버했을 때 (마우스를 위로 올렸을 때)
스타일이 변경되도록 하는 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>웹 폼</title>
<style>
.subm { /* 버튼 스타일 */
display: block; /* 블록 레벨 요소 */
background-color: #fff; /* 배경색 */
border: 1px solid #dedede; /* 테두리 */
cursor: pointer; /* 마우스 포인터 */
padding: 5px 10px 6px 7px; /* 패딩 */
}
.subm img { /* 버튼 내 왼쪽 이미지 */
border: 0; /* 테두리 없음 */
padding: 0; /* 패딩 없음 */
width: 16px; /* 가로 크기 */
height: 16px; /* 세로 크기*/
}
.subm:hover { /* 버튼 위로 마우스 포인터 올렸을 때 스타일 */
background-color: #ffe6e6; /* 배경색 */
border: 1px solid #ff6e6e; /* 테두리 */
color: #ff0000; /* 글자색 */
}
</style>
</head>
<body>
<form>
<button type="submit" class="subm">
<img src="images\image_check.png" alt="버튼체크"> 전송하기
</button>
</form>
</body>
</html>
출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)
사진 출처 : Pixabay
728x90
'HTML5 & CSS3' 카테고리의 다른 글
| HTML & CSS #05 : CSS 기본 (0) | 2022.12.13 |
|---|---|
| HTML & CSS : 산술연산 계산기 만들기 (0) | 2022.12.13 |
| HTML & CSS #04 : 폼, input태그 (0) | 2022.12.13 |
| HTML & CSS #03 : 이미지 & 하이퍼링크 (0) | 2022.12.13 |
| HTML & CSS #02 : text (0) | 2022.12.13 |
댓글