CSS - 버튼: 초보자를 위한 종합 가이드
안녕하세요, 꿈나무 웹 개발자 여러분! 오늘 우리는 CSS 버튼의 fascinле는 세상으로 뛰어들어 보겠습니다. 이 튜토리얼이 끝나면, 기능적이고 아름다운 버튼을 만드는 방법을 배울 것입니다. 그럼 시작해 보겠습니다!
CSS 버튼 - 기본 예제
간단한 버튼으로 시작해 보겠습니다. 필요한 HTML과 CSS를 보여드리겠습니다:
<button class="basic-button">Click me!</button>.basic-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}이렇게 하면 녹색 배경에 白色 글자의 버튼이 만들어집니다. padding 속성은 버튼의 크기를 주고, cursor: pointer은 마우스 커서를 버튼에 올리면 손 모양으로 바꿉니다.
CSS 버튼 색상
버튼은 원하는 색상으로 만들 수 있습니다! 다양한 색상의 버튼을 만드는 방법을 보여드리겠습니다:
<button class="blue-button">Blue</button>
<button class="red-button">Red</button>
<button class="yellow-button">Yellow</button>.blue-button {background-color: #008CBA;}
.red-button {background-color: #f44336;}
.yellow-button {
background-color: #ffeb3b;
color: black;
}黄色 버튼은 읽기 쉽게 하기 위해 黑色 글자를 사용했습니다.
CSS 버튼 크기
font-size와 padding를 조정하여 다양한 크기의 버튼을 쉽게 만들 수 있습니다:
<button class="small-button">Small</button>
<button class="medium-button">Medium</button>
<button class="large-button">Large</button>.small-button {
font-size: 12px;
padding: 10px 24px;
}
.medium-button {
font-size: 16px;
padding: 12px 28px;
}
.large-button {
font-size: 20px;
padding: 14px 40px;
}CSS 버튼 패딩
패딩은 버튼 크기에 매우 중요합니다. 다양한 패딩 값을 실험해 보겠습니다:
<button class="padding-button1">Button 1</button>
<button class="padding-button2">Button 2</button>.padding-button1 {
padding: 10px 20px;
}
.padding-button2 {
padding: 15px 40px;
}첫 번째 값은 상하 패딩, 두 번째 값은 좌우 패딩입니다.
CSS 둥근 모서리 버튼
끝이 날카로운 모서리를 부드럽게 하고 싶다면 border-radius를 사용하세요:
<button class="rounded-button">Rounded</button>.rounded-button {
border-radius: 12px;
}원하는 둥글기를 얻기 위해 다양한 값을 실험해 보세요!
CSS 색상 있는 버튼 테두리
버튼에 테두리를 추가해 보겠습니다:
<button class="border-button">Bordered</button>.border-button {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}이렇게 하면 白色 배경에 绿色 테두리와 黑色 글자의 버튼이 만들어집니다.
CSS 호버 가능 버튼
인터랙티브는 매우 중요합니다! 버튼이 호버할 때 변하게 만들어 보겠습니다:
<button class="hover-button">Hover Me</button>.hover-button {
background-color: white;
color: black;
border: 2px solid #008CBA;
transition: 0.3s;
}
.hover-button:hover {
background-color: #008CBA;
color: white;
}transition 속성은 부드러운 색상 변화를 보장합니다.
CSS 그림자 버튼
버튼에 깊이를 더해 보겠습니다:
<button class="shadow-button">Shadow</button>.shadow-button {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}box-shadow 속성은 버튼에 그림자 효과를 추가합니다.
CSS 비활성화 버튼
occasionally, you need to disable buttons:
<button class="disabled-button" disabled>Disabled</button>.disabled-button {
opacity: 0.6;
cursor: not-allowed;
}opacity 속성은 버튼을 희미하게 보이게 하고, cursor: not-allowed은 커서를 변경하여 버튼이 클릭할 수 없음을 나타냅니다.
CSS 버튼 너비
버튼 너비는 백분율이나 고정 값으로 제어할 수 있습니다:
<button class="full-width">Full Width</button>
<button class="half-width">Half Width</button>.full-width {
width: 100%;
}
.half-width {
width: 50%;
}CSS 버튼 그룹
버튼을 그룹으로 만들어 통일된 모습을 지을 수 있습니다:
<div class="button-group">
<button>Left</button>
<button>Middle</button>
<button>Right</button>
</div>.button-group button {
float: left;
}
.button-group button:not(:last-child) {
border-right: none;
}이렇게 하면 가로로 그룹화된 버튼이 만들어집니다.
CSS 테두리 있는 버튼 그룹
버튼 그룹에 테두리를 추가해 보겠습니다:
<div class="border-button-group">
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>.border-button-group button {
border: 1px solid green;
float: left;
}
.border-button-group button:not(:last-child) {
border-right: none;
}CSS 세로 방향 버튼 그룹
세로 방향으로 버튼 그룹을 만들 수도 있습니다:
<div class="vertical-button-group">
<button>Top</button>
<button>Middle</button>
<button>Bottom</button>
</div>.vertical-button-group button {
display: block;
width: 100%;
}
.vertical-button-group button:not(:last-child) {
border-bottom: none;
}CSS 이미지에 버튼
이미지에 버튼을 배치하여 시각적인 효과를 더해 보겠습니다:
<div class="container">
<img src="image.jpg" alt="Image">
<button class="btn">Button</button>
</div>.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}CSS 애니메이션 버튼
버튼에 애니메이션을 추가해 보겠습니다:
<button class="animated-button">Animated</button>@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.animated-button {
animation: pulse 2s infinite;
}이렇게 하면 버튼에 퍼지는 효과이 생깁니다.
CSS 버튼 눌림 효과
버튼 눌림 효과을 시뮬레이션해 보겠습니다:
<button class="press-button">Press Me</button>.press-button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}버튼을 클릭할 때 버튼이 약간 내려가는 것처럼 보입니다.
CSS 버튼.fade-in 효과
버튼에 fade-in 효과을 만들어 보겠습니다:
<button class="fade-in-button">Fade In</button>@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in-button {
animation: fadeIn 2s;
}이 버튼은 페이지가 로드될 때 fade-in됩니다.
CSS 버튼 波纹 효과
finally, let's create a ripple effect:
<button class="ripple">Ripple</button>.ripple {
position: relative;
overflow: hidden;
}
.ripple:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.ripple:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}This creates a ripple effect when the button is clicked.
그럼 여러분은 다양한 CSS 버튼을 만드는 지식을 얻었습니다. 연습이 완벽을 만드는 것을 기억하며, 이 스타일을 실험하고 자신만의 독특한 버튼을 만들어 보세요. 행복한 코딩을!
Credits: Image by storyset