<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn-wrap{
border-radius: 2px;
background-color:#19ce60;
border:none;
color:#fff;
font-size: 20px;
font-weight: 500;
padding: 10px 30px;
cursor:pointer;
text-decoration: none;
}
</style>
</head>
<body>
<button type="button" class="btn-wrap">NAVER버튼</button>
<a href="#" class="btn-wrap">NAVER버튼</a><!-- 뭔 태그든 버튼처럼 만들 수 있음 -->
</body>
</html>
버튼도 모양을 바꾸는 것이 가능!
모양을 지정할 때 패딩으로 크기를 변경하는 것에 주목하자.
'HTML·CSS' 카테고리의 다른 글
| 221221 HTML CSS float (0) | 2022.12.21 |
|---|---|
| 221221 HTML CSS 패딩마진 실습 (0) | 2022.12.21 |
| 221221 HTML CSS 패딩마진, box-sizing (0) | 2022.12.21 |
| 221221 HTML CSS border 추가 (0) | 2022.12.21 |
| 221220 HTML CSS 백그라운드 (0) | 2022.12.20 |
