입체 버튼 만들기
- 버튼을 클릭하면 눌리는 효과를 넣어준다.
- 버튼의 이름에 음각 효과를 준다.
- google font를 이용하여 폰트를 바꿔준다.
- class 이름을 통해 여러 버튼을 만들어 줄 수 있다.
코드
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">
<style>
.btn{
text-decoration: none;
font-size: 2rem;
display : inline-block;
border-radius: 5px;
padding: 5px 3px 10px 4px;
transition: all 0.1s;
color: white;
text-shadow: 0px -2px rgba(0,0,0,0.5);
font-family: 'Orbitron', sans-serif;
}
.btn.green{
background-color: #25f225;
border-bottom: 5px solid #1fb41f;
}
.btn:active{
transform : translateY(3px);
}
.btn.green:active{
border-bottom: 2px solid #1fb41f;
}
</style>
</head>
<body>
<a class="btn green" href="#green">green</a>
</body>
</html>
