Buttons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css "
/>
<link rel="stylesheet" href="style.css" />
<title>Buttons</title>
</head>
<body>
<!-- BUTTONS -->
<button class="btn">click</button><br />
<button class="btn btn-secondary">secondary</button>
<button class="btn btn-primary">primary</button>
<button class="btn btn-success">success</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-info">info</button>
<button class="btn btn-dark">dark</button>
<button class="btn btn-light">light</button>
<button class="btn btn-link">link</button>
<br />
<!-- OUTLINE BUTTONS -->
<button class="btn btn-outline-secondary">secondary</button>
<button class="btn btn-outline-primary">primary</button>
<button class="btn btn-outline-success">success</button>
<button class="btn btn-outline-danger">danger</button>
<button class="btn btn-outline-warning">warning</button>
<button class="btn btn-outline-info">info</button>
<button class="btn btn-outline-dark">dark</button>
<!-- BACKGROUND COLOR CAN BE CHANGED using css-->
<button class="btn btn-outline-light">light</button>
<button class="btn btn-outline-link">link</button>
<br />
<!-- SIZE -->
<button class="btn btn-primary btn-lg">primary</button>
<button class="btn btn-secondary btn-sm">secondary</button>
<br />
<!-- DISABLED -->
<button class="btn btn-primary" disabled>disabled</button>
<br />
<!-- ANCHOR TAGS OR INPUT TAGS CAN BE CHANGED INTO BUTTONS -->
<a href="#" class="btn btn-dark">google</a>
</body>
</html>
Comments
Post a Comment