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

CSS 단추 크기

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

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>


목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
3056
CSS Word Spacing 단어 간격
3055
CSS Text Direction 텍스트 방향
3054
CSS Line Height 라인 높이
3051
CSS Letter Spacing 글자 간격 1
3050
CSS Text Indentation 텍스트 들여 쓰기
3049
CSS 텍스트 변환 Text Transformation
3046
CSS 텍스트 방향 Text Direction
3045
CSS 라인 높이 Line Height
3044
HTML 글자 간격 Letter Spacing
3043
CSS text-indent
3042
CSS text-transform
3041
CSS text-decoration
3040
CSS Text Alignment
3039
CSS Text Color
3038
CSS Outline - Shorthand property
3034
CSS Outline Width
3033
CSS Outline Color
3032
CSS CSS Outline
3027
CSS CSS Box Model
3026
CSS Setting max-width
3025
CSS CSS Height and Width
3024
CSS CSS Padding
3023
CSS CSS Margins
3022
CSS CSS Border Properties
3021
CSS CSS Syntax and Selectors
3020
HTML The HTML <audio> Element
3019
HTML HTML <video> 요소 1
3018
HTML html google map
3017
HTML SVG와 캔버스의 차이점
3016
HTML SVG Logo
이전 다음
전체 목록