CSS 버튼

이 섹션에서는, 우리는 버튼을 만들 CSS의 사용을 소개한다.

기본 버튼 스타일

CSS 예

.button {
배경 색상 : # 4CAF50 / * 그린 * /
테두리 : 없음;
색상 : 흰색;
패딩 : 15 픽셀 32px;
텍스트 정렬 : 센터;
텍스트 장식 : 없음;
디스플레이 : 인라인 블록;
글꼴 크기 : 16px;
}

»시도

버튼 색상

블루 레드 그레이 블랙

우리는 사용할 수있는 background-color 버튼의 색상을 설정하는 속성을 :

CSS 예

.button1 {배경 색 : # 4CAF50;} / * 그린 * /
.button2 {배경 색 : #의 008CBA;} / * 블루 * /
.button3 {배경 색 : #의 f44336;} / * 레드 * /
.button4 {배경 색 : # e7e7e7; 색상 : 검정;} / * 그레이 * /
.button5 {배경 색 : # 555555;} / * 블랙 * /

»시도

버튼 크기

16px 12 픽셀 20 픽셀 24 픽셀

우리는 사용 font-size 버튼의 크기를 설정 속성 :

CSS 예

.button1 {글꼴 크기 : 10px;}
.button2 {글꼴 크기 : 12 픽셀;}
.button3 {글꼴 크기 : 16px;}
.button4 {글꼴 크기 : 20 픽셀;}
.button5 {글꼴 크기 : 24 픽셀;}

»시도

둥근 버튼

4 픽셀 12 픽셀 50 % 8px

우리는 사용할 수 있습니다 border-radius 필렛 버튼을 설정하는 속성을 :

CSS 예

.button1 {국경 반경 : 2 픽셀;}
.button2 {국경 반경 : 4 픽셀;}
.button3 {국경 반경 : 8px;}
.button4 {국경 반경 : 12 픽셀;}
.button5 {국경 반경 : 50 %;}

»시도

버튼의 테두리 색상

우리는 사용할 수있는 border 버튼 테두리 색상의 속성을 :

CSS 예

.button1 {
배경 색상 : 흰색;
색상 : 검정;
국경 : 2 픽셀 고체 # 4CAF50 / * 그린 * /
}
...

»시도

호버 단추

우리는 사용할 수 있습니다 :hover 버튼 위에 마우스를 가져 가면 스타일을 수정하려면 선택합니다.

팁 : 우리가 사용할 수있는 transition-duration 효과의 속도를 "가져가"로 설정 속성을 :

CSS 예

.button {
-webkit-전이 시간 : 0.4s / * 사파리 * /
전이 시간 : 0.4s;
}

.button : 가져가 {
배경 색상 : # 4CAF50 / * 그린 * /
색상 : 흰색;
}
...

»시도

버튼 그림자

우리는 사용할 수있는 box-shadow 버튼에 그림자를 추가하는 속성을 :

CSS 예

.button1 {
상자 그림자 : 0 8px 16px 0 RGBA (0,0,0,0.2), 0 6 픽셀 20 픽셀 0 RGBA (0,0,0,0.19);
}

.button2 : 가져가 {
상자 그림자 : 0 12 픽셀 16px 0 RGBA (0,0,0,0.24), 0 17px 50 픽셀 0 RGBA (0,0,0,0.19);
}

»시도