소개
여기서는 링크를 버튼으로 만드는 방법에 대해서 알아봅니다.
사용기술
- HTML
- CSS
관련 지식
<!doctype html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<style>
.btn{
text-decoration: none;
font-size:2rem;
color:white;
padding:10px 20px 10px 20px;
margin:20px;
display:inline-block;
border-radius: 10px;
transition:all 0.1s;
text-shadow: 0px -2px rgba(0, 0, 0, 0.44);
font-family: 'Lobster', cursive;
}
.btn:active{
transform: translateY(3px);
}
.btn.blue{
background-color: #1f75d9;
border-bottom:5px solid #165195;
}
.btn.blue:active{
border-bottom:2px solid #165195;
}
.btn.red{
background-color: #ff521e;
border-bottom:5px solid #c1370e;
}
.btn.red:active{
border-bottom:2px solid #c1370e;
}
</style>
</head>
<body>
<a class="btn blue" href="#blue">blue</a>
<a class="btn red" href="#red">red</a>
</body>
</html>
