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

CSS 단추 크기

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

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>


목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
3168
CSS CSS3 border-image Property
3167
CSS CSS3 border-radius - 각 모서리 지정
3166
CSS CSS3 border-radius 속성
3165
HTML HTML5 로컬 저장소
3164
HTML HTML5 드래그 앤 드롭
3163
HTML HTML5 Geolocation 사용자 위치 찾기
3162
HTML YouTube 동영상 ID
3161
HTML HTML 도우미 (플러그인)
3160
HTML HTML5 Audio on the Web(웹상의 오디오)
3159
HTML HTML5 비디오
3158
HTML HTML 멀티미디어 오디오 형식
3157
HTML HTML 멀티미디어
3156
기타 Google 아이콘
3155
기타 부트 스트랩 아이콘
3154
기타 아이콘을 추가하는 방법
3153
반응형 부트 스트랩 <blockquote>
3152
반응형 부트 스트랩 <abbr>
3151
반응형 부트 스트랩 <mark>
3150
반응형 부스트랩 html small tag
3149
반응형 부트 스트랩의 기본 설정
3148
반응형 부트 스트랩 그리드 시스템
3147
CSS 왼쪽에 툴팁 나오게 하는 소스
3146
CSS 오른쪽에 툴팁 나오게 하는 소스
3145
CSS css를 이용한 툴팁만들기
3144
CSS CSS3 Word Breaking
3143
CSS CSS3 Word Wrapping
3142
CSS CSS3 텍스트 오버플로(CSS3 Text Overflow)
3136
CSS css 이미지 갤러리
3135
CSS CSS 드롭 다운 2
3134
CSS css 기본 툴팁
이전 다음
전체 목록