테스트 사이트 - 개발 중인 베타 버전입니다
SIR

CSS 단추 크기

수다왕
프로필 보기이 회원 글보기
 · 8년 전 · 1488

CSS 단추 크기


이 font-size속성을 사용하여 버튼의 글꼴 크기를 변경합니다.


예

.button1 {font-size: 10px;}

.button2 {font-size: 12px;}

.button3 {font-size: 16px;}

.button4 {font-size: 20px;}

.button5 {font-size: 24px;}


[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    margin: 4px 2px;

    cursor: pointer;

}


.button1 {font-size: 10px;}

.button2 {font-size: 12px;}

.button3 {font-size: 16px;}

.button4 {font-size: 20px;}

.button5 {font-size: 24px;}

</style>

</head>

<body>


<h2>Button Sizes</h2>

<p>Change the font size of a button with the font-size property:</p>


<button class="button button1">10px</button>

<button class="button button2">12px</button>

<button class="button button3">16px</button>

<button class="button button4">20px</button>

<button class="button button5">24px</button>


</body>

</html>





이 padding속성을 사용하여 버튼의 패딩을 변경합니다.


10px 24px 12px 28px 14px 40px 32px 16px 16px

예

.button1 {padding: 10px 24px;}

.button2 {padding: 12px 28px;}

.button3 {padding: 14px 40px;}

.button4 {padding: 32px 16px;}

.button5 {padding: 16px;}



[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}


.button1 {padding: 10px 24px;}

.button2 {padding: 12px 28px;}

.button3 {padding: 14px 40px;}

.button4 {padding: 32px 16px;}

.button5 {padding: 16px;}

</style>

</head>

<body>


<h2>Button Sizes</h2>

<p>Change the padding of a button with the padding property:</p>


<button class="button button1">10px 24px</button>

<button class="button button2">12px 28px</button>

<button class="button button3">14px 40px</button>

<button class="button button4">32px 16px</button>

<button class="button button5">16px</button>


</body>

</html>


목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3087
CSS Striped Tables(스트라이프 테이블)
3086
CSS 테이블 Hoverable Table
3085
CSS 테이블 수평 분배기
3084
CSS 테이블 패딩
3083
CSS 테치블 수직 정렬
3082
CSS 테이블 수평 정렬
3081
CSS 표 너비와 높이
3080
CSS 표 축소 창
3079
CSS 표 테두리
3078
CSS 스타일리스트 색상
3077
CSS 목록 - 속기 속성
3076
CSS List Item 마커 위치 지정
3075
CSS 목록 항목 마커로 이미지 만들기
3074
CSS HTML 목록 및 CSS 목록 속성
3073
CSS css Advanced - Link Buttons 고급 - 링크 버튼
3072
CSS CSS Links 배경색
3071
CSS CSS Links Text Decoration
3070
CSS CSS Links 스타일 링크
3069
CSS scale () 메서드
3068
CSS rotate () 메서드
3067
CSS CSS3 2D Transforms
3065
CSS 부트 스트랩 아이콘
3064
CSS font variant 글꼴 변형
3063
CSS Font Weight 1
3062
CSS 백분율과 em의 조합 사용 1
3061
CSS Em로 글꼴 크기 설정 Set Font Size With Em
3060
CSS Font Size 글자 크기
3059
CSS Font Style 글꼴 스타일
3058
CSS Font Family 글꼴 모음
3057
CSS Text Shadow 문자 그림자
이전 다음
전체 목록