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;} »그것을 자신을 시도 둥근 버튼
사용 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 */
}
... »그것을 자신을 시도 Hoverable 버튼
사용 :hover 당신이 그것을 위에 마우스를 이동할 때 버튼의 스타일을 변경하려면 선택합니다.
팁 : 사용하는 transition-duration 은 "호버"효과의 속도를 결정하는데 속성 :
예
.button {
-webkit-transition-duration: 0.4s; /* Safari */
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 는 "아무 주차 기호"를 표시하지 것이다 "-수 없습니다"의 값을 가진 속성을 때 버튼을 통해 사용자가 마우스 :
버튼 폭
기본적으로, 버튼의 크기 (넓이 콘텐츠 등)의 텍스트 콘텐츠에 의해 결정된다. 사용 width 버튼의 폭을 변경하는 속성 :
버튼 그룹
여백을 제거하고 추가 float:left 버튼 그룹을 만들고 각 버튼 :
경계 버튼 그룹
사용 border 보더 버튼 그룹을 만들 속성을 :