반응형
CSS를 이용해서 만든 버튼입니다. 마우스를 올리면 버튼의 배경색이 바뀝니다.
만들어진 결과 모양을 먼저 보겠습니다.
전체 코드는 다음과 같습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 버튼 만들기</title>
<style>
ul {
list-style:none;
}
li {
display:inline-block;
margin:10px;
}
li a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
.button {
border: 2px solid black;
box-shadow: rgba(0,0,0,0.4) 5px 5px;
}
a:hover {
background:blue;
color:white;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="button">메뉴 1</a></li>
<li><a href="#" class="button">메뉴 2</a></li>
<li><a href="#" class="button">메뉴 3</a></li>
<li><a href="#" class="button">메뉴 4</a></li>
</ul>
</body>
</html>
소스 다운로드
'HTML_CSS' 카테고리의 다른 글
| HTML5 최신 표준 태그 (0) | 2023.09.07 |
|---|---|
| (강의용) 텍스트 1 - 김소월 진달래꽃, 로렘입숨 (0) | 2023.09.06 |
| (HTML CSS) header footer 있는 3단 고정형 레이아웃 (0) | 2023.05.21 |
| (HTML CSS) 2단 레이아웃 예제 (0) | 2023.04.25 |
| (HTML) 테이블(table) 태그와 스타일을 사용하는 예 (0) | 2023.04.18 |