Add a button to your UI with How to create custom buttons in boostrap 5.1.3. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<div class="container mt-3 pt-3">
2 <div class="row g-3 text-center">
3 <div class="col-6 col-md-4 col-xl-2">
4 <button type="button" class="btn btn-info w-100" name="button">button info</button>
5 </div>
6 <div class="col-6 col-md-4 col-xl-2">
7 <button type="button" class="btn btn-warning w-100" name="button">button warning</button>
8 </div>
9 <div class="col-6 col-md-4 col-xl-2">
10 <button type="button" class="btn btn-danger w-100" name="button">button danger</button>
11 </div>
12 <div class="col-6 col-md-4 col-xl-2">
13 <button type="button" class="btn btn-secondary w-100" name="button">button secondary</button>
14 </div>
15 <div class="col-6 col-md-4 col-xl-2">
16 <button type="button" class="btn btn-primary w-100" name="button">button primary</button>
17 </div>
18
19 <div class="col-6 col-md-4 col-xl-2">
20 <button type="button" class="btn btn-light border w-100" name="button">button light</button>
21 </div>
22 <hr>
23 </div>
24
25 <div class="row g-3 text-center">
26 <div class="col-6 col-md-4 col-xl-2">
27 <button type="button" class="btn btn-info w-100 btn-lg py-3" name="button">button info</button>
28 </div>
29 <div class="col-6 col-md-4 col-xl-2">
30 <button type="button" class="btn btn-warning w-100 btn-lg py-3" name="button">button warning</button>
31 </div>
32 <div class="col-6 col-md-4 col-xl-2">
33 <button type="button" class="btn btn-danger w-100 btn-lg py-3" name="button">button danger</button>
34 </div>
35 <div class="col-6 col-md-4 col-xl-2">
36 <button type="button" class="btn btn-secondary w-100 btn-lg py-3" name="button">button secondary</button>
37 </div>
38 <div class="col-6 col-md-4 col-xl-2">
39 <button type="button" class="btn btn-primary w-100 btn-lg py-3" name="button">button primary</button>
40 </div>
41
42 <div class="col-6 col-md-4 col-xl-2">
43 <button type="button" class="btn btn-light border w-100 btn-lg py-3" name="button">button light</button>
44 </div>
45 <hr>
46 </div>
47
48 <div class="row g-3 text-center">
49 <div class="col-6 col-md-4 col-xl-2">
50 <button type="button" class="btn btn-info rounded-20" name="button">button info</button>
51 </div>
52 <div class="col-6 col-md-4 col-xl-2">
53 <button type="button" class="btn btn-warning rounded-20" name="button">button warning</button>
54 </div>
55 <div class="col-6 col-md-4 col-xl-2">
56 <button type="button" class="btn btn-danger rounded-20" name="button">button danger</button>
57 </div>
58 <div class="col-6 col-md-4 col-xl-2">
59 <button type="button" class="btn btn-secondary rounded-20" name="button">button secondary</button>
60 </div>
61 <div class="col-6 col-md-4 col-xl-2">
62 <button type="button" class="btn btn-primary rounded-20" name="button">button primary</button>
63 </div>
64
65 <div class="col-6 col-md-4 col-xl-2">
66 <button type="button" class="btn btn-light border rounded-20" name="button">button light</button>
67 </div>
68 <hr>
69 </div>
70
71 <div class="row g-3 text-center">
72 <div class="col-6 col-md-4 col-xl-2">
73 <button type="button" class="btn btn-outline-info w-100 btn-lg py-3" name="button">button info</button>
74 </div>
75 <div class="col-6 col-md-4 col-xl-2">
76 <button type="button" class="btn btn-outline-warning w-100 btn-lg py-3" name="button">button warning</button>
77 </div>
78 <div class="col-6 col-md-4 col-xl-2">
79 <button type="button" class="btn btn-outline-danger w-100 btn-lg py-3" name="button">button danger</button>
80 </div>
81 <div class="col-6 col-md-4 col-xl-2">
82 <button type="button" class="btn btn-outline-secondary w-100 btn-lg py-3" name="button">button secondary</button>
83 </div>
84 <div class="col-6 col-md-4 col-xl-2">
85 <button type="button" class="btn btn-outline-primary w-100 btn-lg py-3" name="button">button primary</button>
86 </div>
87
88 <div class="col-6 col-md-4 col-xl-2">
89 <button type="button" class="btn btn-outline-light border w-100 text-dark btn-lg py-3" name="button">button light</button>
90 </div>
91 <hr>
92
93 <div class="d-flex">
94 <button class="btn btn-primary w-50 me-md-2 shadow rounded-0 " type="button">Button</button>
95 <button class="btn btn-primary w-50 shadow rounded-0 bg-gradient" type="button">Button</button>
96 </div>
97
98 <div class="d-grid gap-1 d-md-flex justify-content-md-end">
99 <button class="btn btn-danger me-md-2 px-5" type="button">Button danger</button>
100 <button class="btn btn-success px-5" type="button">Button success</button>
101 </div>
102 </div>
103 </div>
Pure CSS Neon Button
Add a button to your UI with Pure CSS Neon Button. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Firework Animation on Button Click
Firework Animation on Button Click — a free Bootstrap 5 button snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.
Pure CSS Pulsing Button ripple effect animation
Pure CSS Pulsing Button ripple effect animation: a hand-crafted, open-source Bootstrap 5 button. HTML & CSS included, ready to copy.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.