Bootstrap 4 / Buttons / 버튼 꾸미기

Buttons

CSS로 꾸밀 때 손이 많이 가는 것 중의 하나가 버튼입니다. Bootstrap을 사용하면 여러 색의 버튼을 쉽게 만들 수 있습니다.

기본

클래스의 값으로 btn btn-xxx를 추가하면 버튼이 꾸며집니다. xxx에 들어갈 문자열에 따라 색이 달라집니다. 버튼에 마우스를 올리면 좀 더 진한 색으로 바뀝니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap 4</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col">
					<h1>Button</h1>
					<button type="button" class="btn btn-primary">Primary</button>
					<button type="button" class="btn btn-secondary">Secondary</button>
					<button type="button" class="btn btn-success">Success</button>
					<button type="button" class="btn btn-danger">Danger</button>
					<button type="button" class="btn btn-warning">Warning</button>
					<button type="button" class="btn btn-info">Info</button>
					<button type="button" class="btn btn-light">Light</button>
					<button type="button" class="btn btn-dark">Dark</button>
					<button type="button" class="btn btn-link">Link</button>
				</div>
			</div>
		</div>
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
	</body>
</html>

위 아래 여백이 없으므로, 줄바꿈이 있을 때 버튼이 붙는다는 것에 주의합니다.

버튼 모양으로 만들 수 있는 태그

꼭 button만 꾸밀 수 있는 것은 아닙니다. a, input, span, p 등 다른 요소도 꾸밀 수 있습니다.

<a class="btn btn-primary" href="#">Link</a>
<input class="btn btn-success" type="button" value="Input">
<input class="btn btn-danger" type="submit" value="Submit">
<input class="btn btn-info" type="reset" value="Reset">

테두리 모양의 버튼

outline 문자열을 추가하여 흰 배경에 테두리가 있는 버튼을 만들 수 있습니다.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

크기

클래스에 btn-lg를 추가하면 버튼이 커지고, btn-sm을 추가하면 버튼이 작아집니다. btn-block을 추가하면 block 레벨의 버튼이 만들어집니다.

<p><button type="button" class="btn btn-primary">Button</button></p>
<p><button type="button" class="btn btn-secondary btn-lg">Button large</button></p>
<p><button type="button" class="btn btn-success btn-sm">Button Small</button></p>
<p><button type="button" class="btn btn-danger btn-block">Button Block</button></p>

활성화와 비활성화

클래스에 active를 추가하면 색이 진해집니다. disabled를 축하면 색이 흐려집니다.

<p><button type="button" class="btn btn-primary">Nomal</button></p>
<p><button type="button" class="btn btn-primary active">Active</button></p>
<p><button type="button" class="btn btn-primary" disabled>Disabled</button></p>

클래스 값으로 disabled를 추가해도 됩니다.

<span class="btn btn-primary disabled">Disabled</span>