최고의 CSS 버튼 튜토리얼 2024년, 이 튜토리얼에서는 기본 버튼 스타일,버튼 색상,버튼 크기,둥근 버튼,버튼의 테두리 색상,호버 단추,버튼 그림자,사용 안 함 버튼,버튼 폭,버튼 그룹,국경 버튼 그룹,버튼 애니메이션,를 배울 수 있습니다.
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 / * 그린 * /
}
ko.
»시도
호버 단추
우리는 사용할 수 있습니다 :hover
버튼 위에 마우스를 가져 가면 스타일을 수정하려면 선택합니다.
팁 : 우리가 사용할 수있는 transition-duration
효과의 속도를 "가져가"로 설정 속성을 :
CSS 예
.button {
-webkit-전이 시간 : 0.4s / * 사파리 * /
전이 시간 : 0.4s;
}
.button : 가져가 {
배경 색상 : # 4CAF50 / * 그린 * /
색상 : 흰색;
}
ko.
»시도
버튼 그림자
우리는 사용할 수있는 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);
}
»시도
사용 안 함 버튼
우리는 사용할 수 opacity
투명성을 추가하는 속성을 버튼 ( "장애인"효과 속성과 유사).
팁 : 내가 추가 할 수 있습니다 무엇 cursor
속성을 설정하고이 비활성화 된 이미지를 설정하는 "-수 없습니다"합니다 :
CSS 예
.disabled {
불투명 : 0.6;
커서 :-수 없습니다;
}
»시도
버튼 폭
기본적으로, 버튼의 버튼 텍스트의 크기는 (텍스트 매칭 길이 기준)로했다. 우리는 사용할 수있는 width
버튼의 폭을 설정하는 특성 :
팁 : 당신은 당신이 백분율로 설정할 수 있습니다 응답 버튼을 설정하려면, 하나의 단위로 화소 (픽셀)를 사용하여 고정 폭을 설정합니다.
CSS 예
.button1 {폭 : 250 픽셀;}
.button2 {폭 : 50 %}
.button3 {폭 : 100 %;}
»시도
버튼 그룹
버튼 버튼 버튼
외부 및 추가에서 제거 float:left
버튼의 설정 :
CSS 예
.button {
플로트 : 왼쪽;
}
»시도
국경 버튼 그룹
버튼 버튼 버튼
우리는 사용할 수 border
테두리 버튼 그룹을 설정하는 속성을 :
CSS 예
.button {
플로트 : 왼쪽;
국경 : 1 픽셀 녹색으로
}
»시도
버튼 애니메이션
CSS 예
화살표 버튼 위에 마우스를 추가합니다 :
»시도 CSS 예
클릭 "리플"효과 추가 :
»시도 CSS 예
당신이 "풀다운"효과를 추가 할 때 클릭
»시도