<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css를 이용한 버튼</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nerko+One&display=swap" rel="stylesheet">
</head>
<style>
&{
margin:0;
padding:0;
}
#btn{
background-color: orange;
width: 300px;
height: 200px;
margin: 100px;
border : 20px solid #EEEEEE;
border-radius: 30px;
text-align: center;
line-height: 200px;
}
#btn>a{
/*block으로바뀌어서 hover*/
display: block;
border-radius: 10px;
font-family: 'Nerko One', cursive;
font-size : 6em;
font-weight: 500;
text-decoration: none;
color : #FFFFFF;
/*font-style: italic*/
}
#btn>a:hover{
background-color: darkgreen;
color : green;
background-image: url(image/tae8.gif);
background-size : 100%;
</style>
<body>
<div id="btn">
<a>TAE</a>
</div>
</body>
</html>