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

CSS 단추 크기

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

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>


목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
3199
CSS skewX () 메서드 , skewY () 메서드, skew () 메서드
3198
CSS scale () 메서드
3197
CSS rotate () 메서드
3196
CSS CSS3 2D변환 - translate() 메서드
3195
CSS CSS3 단어 속보
3194
CSS CSS3 워드 래핑
3192
CSS css 굵은 글씨 사용
3191
CSS css 원하는 글꼴 사용하기
3190
CSS CSS3 웹 폰트 - @ font-face 규칙
3189
CSS CSS3 텍스트 오버플로 세번째
3188
CSS CSS3 텍스트 오버플로 두번째
3187
CSS CSS3 상자 그림자 속성
3186
CSS CSS3 그림자 효과 다섯번째
3185
CSS CSS3 그림자 효과 네번째
3184
CSS CSS3 그림자 효과 세번째
3183
CSS CSS3 그림자 효과 두번째
3182
CSS CSS3 그림자 효과
3181
CSS CSS3 그라디언트 방사형 그라데이션 반복
3180
CSS CSS3 그라디언트 다른 크기의 키워드 사용
3179
CSS CSS3 그라디언트 모양 설정
3178
CSS CSS3 방사형 그라디언트 - 다른 간격의 색상 정지
3177
CSS CSS3 그라디언트 두번째
3176
CSS CSS3 그라디언트
3175
CSS CSS3 Colors
3174
CSS CSS3 background-clip 속성
3173
CSS CSS3 background-origin 속성
3172
CSS css3 전체 크기 배경 이미지
3171
CSS css3 여러 배경 이미지의 크기 정의
3170
CSS CSS3 배경 크기
3169
CSS CSS3 다중 배경
이전 다음
전체 목록