투명한 배경을 가진 버튼 디자인을 위한 6가지 예제를 제공하겠습니다. 각 예제에는 CSS와 HTML 코드가 포함되어 있습니다.
예제 1: 기본 투명 버튼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 투명 버튼 스타일 */
.transparent-button {
background-color: transparent;
border: 2px solid #3498db;
color: #3498db;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
/* 버튼 호버 효과 */
.transparent-button:hover {
background-color: #3498db;
color: #fff;
}
</style>
<title>기본 투명 버튼</title>
</head>
<body>
<a href="#" class="transparent-button">투명 버튼</a>
</body>
</html>
이 예제는 기본 투명 버튼을 만드는 방법을 보여줍니다. .transparent-button 클래스를 사용하여 버튼의 스타일을 정의하고 호버 효과를 추가합니다.
예제 2: 투명 버튼 둥글게
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 투명 버튼 스타일 */
.rounded-transparent-button {
background-color: transparent;
border: 2px solid #e74c3c;
border-radius: 20px;
color: #e74c3c;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
/* 버튼 호버 효과 */
.rounded-transparent-button:hover {
background-color: #e74c3c;
color: #fff;
}
</style>
<title>투명 버튼 둥글게</title>
</head>
<body>
<a href="#" class="rounded-transparent-button">둥글게 투명 버튼</a>
</body>
</html>
이 예제는 둥글게 모양의 투명 버튼을 만드는 방법을 보여줍니다. .rounded-transparent-button 클래스를 사용하여 버튼의 스타일을 정의하고 호버 효과를 추가합니다.
예제 3: 그림자 효과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 투명 버튼 스타일 */
.shadowed-transparent-button {
background-color: transparent;
border: none;
color: #27ae60;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
/* 버튼 호버 효과 */
.shadowed-transparent-button:hover {
background-color: #27ae60;
color: #fff;
}
</style>
<title>그림자 효과 투명 버튼</title>
</head>
<body>
<a href="#" class="shadowed-transparent-button">그림자 효과 투명 버튼</a>
</body>
</html>
이 예제는 그림자 효과가 있는 투명 버튼을 만드는 방법을 보여줍니다. .shadowed-transparent-button 클래스를 사용하여 버튼의 스타일을 정의하고 그림자 효과를 추가합니다.
예제 4: 글자색 반전
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 투명 버튼 스타일 */
.inverted-transparent-button {
background-color: transparent;
border: 2px solid #9b59b6;
color: #fff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
/* 버튼 호버 효과 */
.inverted-transparent-button:hover {
background-color: #9b59b6;
}
</style>
<title>글자색 반전 투명 버튼</title>
</head>
<body>
<a href="#" class="inverted-transparent-button">글자색 반전 투명 버튼</a>
</body>
</html>
이 예제는 글자색이 반전된 투명 버튼을 만드는 방법을 보여줍니다. .inverted-transparent-button 클래스를 사용하여 버튼의 스타일을 정의하고 버튼을 호버할 때 배경색이 변합니다.
예제 5: 아이콘과 함께
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 투명 버튼 스타일 */
.icon-transparent-button {
background-color: transparent;
border: 2px solid #f39c12;
color: #f39c12;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-flex;
align-items: center;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
/* 버튼 아이콘 스타일 */
.icon {
margin-right: 5px;
}
/* 버튼 호버 효과 */
.icon-transparent-button:hover {
background-color: #f39c12;
color: #fff;
}
</style>
<title>아이콘과 함께 투명 버튼</title>
</head>
<body>
<a href="#" class="icon-transparent-button">
<span class="icon">🚀</span>아이콘과 함께 투명 버튼
</a>
</body>
</html>
이 예제는 아이콘과 함께 표시되는 투명 버튼을 만드는 방법을 보여줍니다. .icon-transparent-button 클래스를 사용하여 버튼의 스타일을 정의하고 버튼에 아이콘을 추가합니다.
예제 6: 크기 조절 가능한 버튼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 투명 버튼 스타일 */
.resizable-transparent-button {
background-color: transparent;
border: 2px solid #2ecc71;
color: #2ecc71;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
/* 버튼 호버 효과 */
.resizable-transparent-button:hover {
background-color: #2ecc71;
color: #fff;
transform: scale(1.1);
}
</style>
<title>크기 조절 가능한 투명 버튼</title>
</head>
<body>
<a href="#" class="resizable-transparent-button">크기 조절 가능한 투명 버튼</a>
</body>
</html>
'CSS' 카테고리의 다른 글
| 모바일 네비게이션: 모바일 화면용 네비게이션 디자인. (0) | 2023.12.23 |
|---|---|
| 스크롤바 커스터마이징: 스크롤바 스타일 커스터마이징. (0) | 2023.12.23 |
| 다중 열 텍스트: 다중 열 텍스트 레이아웃 구현. (0) | 2023.12.23 |
| 타이포그래피 스타일링: 텍스트 타이포그래피 스타일 조절. (0) | 2023.12.23 |
| 비디오 배경: 비디오 배경 설정. (0) | 2023.12.23 |
