버튼 스타일링을 위한 예제와 상세한 설명을 제공하겠습니다. 아래 예제에서는 버튼의 디자인을 커스터마이징하고, CSS와 HTML 코드를 통합하여 제공하겠습니다. 각 부분을 상세히 설명하고, 마지막에 티스토리용 태그를 한 줄로 나열하겠습니다.
1. 버튼 스타일링:
버튼의 디자인을 커스터마이징하기 위해 CSS를 사용합니다. 버튼의 배경색, 텍스트 스타일, 그림자 등을 조절할 수 있습니다.
단계 1: CSS 스타일링
버튼 스타일을 변경하기 위해 다음과 같이 CSS 스타일을 적용합니다.
예제 1: 기본 버튼 스타일
<!DOCTYPE html>
<html>
<head>
<style>
.default-button {
background-color: #3498db;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="default-button">기본 버튼</button>
</body>
</html>
예제 2: 둥근 버튼 스타일
<!DOCTYPE html>
<html>
<head>
<style>
.rounded-button {
background-color: #e74c3c;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 20px; /* 모서리를 둥글게 */
cursor: pointer;
}
</style>
</head>
<body>
<button class="rounded-button">둥근 버튼</button>
</body>
</html>
예제 3: 그림자 버튼 스타일
<!DOCTYPE html>
<html>
<head>
<style>
.shadow-button {
background-color: #f39c12;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<button class="shadow-button">그림자 버튼</button>
</body>
</html>
예제 4: 그라데이션 버튼 스타일
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-button {
background: linear-gradient(to right, #3498db, #2980b9); /* 그라데이션 배경 */
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="gradient-button">그라데이션 버튼</button>
</body>
</html>
예제 5: 글씨 버튼 스타일
<!DOCTYPE html>
<html>
<head>
<style>
.text-button {
background-color: transparent; /* 투명 배경 */
color: #3498db;
border: none;
cursor: pointer;
text-decoration: underline; /* 밑줄 효과 */
}
</style>
</head>
<body>
<button class="text-button">글씨 버튼</button>
</body>
</html>
예제 6: 아이콘 버튼 스타일
<!DOCTYPE html>
<html>
<head>
<style>
.icon-button {
background-color: #2ecc71;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 24px; /* 아이콘 크기 조절 */
}
</style>
</head>
<body>
<button class="icon-button">✓</button> <!-- ✓는 체크 마크 아이콘 -->
</body>
</html>
'CSS' 카테고리의 다른 글
| 투명도 조절: 요소의 투명도 설정. (0) | 2023.12.23 |
|---|---|
| 링크 스타일링: 하이퍼링크 스타일 변경. (0) | 2023.12.23 |
| 리스트 스타일 변경: 목록 요소의 스타일 변경. (0) | 2023.12.23 |
| 그림자 효과: 요소에 그림자 효과 추가. (0) | 2023.12.23 |
| 이미지 원형으로 자르기: 이미지를 원형으로 표시. (0) | 2023.12.23 |