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

CSS 단추 크기

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

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>


목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
3293
기타 W3.CSS 테두리
3292
기타 W3.CSS 패널 표시 (열기)
3291
기타 W3.CSS 패널 숨기기 (닫기)
3290
기타 W3.CSS 둥근 패널
3289
기타 W3.CSS Panels as Cards
3288
기타 W3.CSS Panels for Alerts
3286
CSS W3.CSS Panels for Quotes
3285
CSS W3.CSS Panels for Notes
3284
CSS W3.CSS 패널
3282
기타 W3.CSS 테이블
3281
기타 W3.CSS 경고
3280
기타 W3.CSS 컨테이너
3279
기타 SVG <rect> 예제
3278
기타 SVG <rect>
3277
기타 HTML의 SVG
3276
CSS 반응 형 웹 디자인 - 비디오 : width, max-width 속성 사용
3275
CSS 반응이 빠른 웹 디자인 - 배경 이미지 1
3274
CSS 반응이 빠른 웹 디자인 - 이미지
3273
CSS 반응형 미디어쿼리
3272
HTML JS & HTML 코드 한줄로 만드는 사이트
3271
웹접근성 로그인 자동완성 제외~
3270
CSS 반응 형 웹 디자인 - 미디어 쿼리
3269
CSS 반응 형 웹 디자인 - 그리드 뷰
3268
CSS 반응 이 빠른 웹 디자인 - 뷰포트
3267
반응형 반응 형 웹 디자인이란 무엇입니까?
3266
CSS CSS3 미디어 쿼리 - 추가 예제
3265
CSS CSS3 미디어 쿼리
3263
HTML 유튜브 댓글 입력 스타일
3262
HTML HTML & CSS 코드 정리해 주는 사이트
3261
CSS 플렉스 항목 속성
이전 다음
전체 목록