CSS 버튼
CSS를 사용하여 버튼의 스타일을 지정하는 방법을 배웁니다.
기본 버튼 스타일링
예시
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
버튼 색상
속성을 사용하여 background-color버튼의 배경색을 변경합니다.
예시
.button1 {background-color: #4CAF50;} /* Green */
.button2
{background-color: #008CBA;} /* Blue */
.button3 {background-color:
#f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5
{background-color: #555555;} /* Black */
버튼 크기
속성을 사용하여 font-size버튼의 글꼴 크기를 변경합니다.
예시
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3
{font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
속성을 사용하여 padding버튼의 패딩을 변경합니다.
예시
.button1 {padding: 10px
24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
둥근 버튼
속성을 사용하여 border-radius버튼에 둥근 모서리를 추가합니다.
예시
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3
{border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
컬러 버튼 테두리
속성을 사용하여 border버튼에 색상 테두리를 추가합니다.
예시
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
호버블 버튼
선택기를 사용하여 :hover버튼 위로 마우스를 이동할 때 버튼의 스타일을 변경합니다.
팁: 속성을 사용 transition-duration하여 "호버" 효과의 속도를 결정합니다.
예시
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
그림자 버튼
속성을 사용하여 box-shadow버튼에 그림자를 추가합니다.
예시
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0
rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px
16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
비활성화된 버튼
속성을 사용하여 opacity버튼에 투명도를 추가합니다("비활성화된" 모양 생성).
팁:cursor 버튼 위에 마우스를 놓으면 "주차 금지 표지판"이 표시되는 "허용되지 않음" 값으로 속성을 추가할 수도 있습니다 .
예시
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
버튼 너비
기본적으로 버튼의 크기는 텍스트 콘텐츠(콘텐츠 너비)에 따라 결정됩니다. 속성을 사용하여 width버튼의 너비를 변경합니다.
예시
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width:
100%;}
버튼 그룹
여백을 제거 float:left하고 각 버튼에 추가하여 버튼 그룹을 만듭니다.
예시
.button {
float: left;
}
테두리가 있는 버튼 그룹
border속성을 사용하여 테두리가 있는 버튼 그룹을 만듭니다 .
예시
.button {
float: left;
border: 1px
solid green;
}
수직 버튼 그룹
나란히 사용 하지 않고 버튼을 서로 아래에 그룹화하는 display:block대신 사용:float:left
예시
.button {
display: block;
}
이미지의 버튼
애니메이션 버튼
예시
호버에 화살표 추가:
예시
클릭 시 "눌림" 효과 추가:
예시
호버에서 페이드 인:
예시
클릭 시 "파급" 효과 추가: