반응형
안녕하세요.
웹 페이지에서 투명 버튼인 고스트 버튼은
쉽게 css로 구현할 수 있습니다.
구현하고 싶은 페이지에 알맞게 색상, 크기, 위치를
변경하기 쉽습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<html>
<head>
<title>codeomni.tistory.com css ghost button 고스트 투명 버튼 소스 코드</title>
<style>
body {
background:url('background.png') no-repeat center fixed;
background-size:cover;
}
.ghost-button {
align-items: center;
display: inline-block;
padding: 25px 40px;
margin: 320px 70px;
border: 3px solid #d9cbb3;
color: #d9cbb3;
text-align: center;
}
.ghost-button:hover {
background-color:#d9cbb3;
color:black;
}
</style>
</head>
<body>
<div>
<a href="#" class="ghost-button">Button</a>
</div>
</body>
</html>
|
cs |
▲ 실행 화면입니다.
▲ 마우스를 버튼 위에 올렸을 때의 실행 화면입니다.
▲ .ghost-button: hover의 속성과 값을 조정할 수 있습니다.
댓글