HTML_CSS
(HTML CSS) 버튼 만들기
코딩ABC
2023. 6. 9. 10:55
반응형
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>
소스 다운로드
반응형