Skip to content

Commit 9085707

Browse files
marveluckmarveluck
authored
Update README.md
1 parent 421df09 commit 9085707

1 file changed

Lines changed: 92 additions & 9 deletions

File tree

‎README.md‎

Lines changed: 92 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
1-
# Bootstrap Square Buttons
21

32
Responsive Square Buttons built with Bootstrap 5. Black, disabled, full-width outline, social, block square buttons examples.
43

5-
A collection of square buttons created with the latest Bootstrap 5. Black, disabled, full-width, outline, social, block square buttons examples.
4+
Check out [Bootstrap Square Buttons Documentation](https://mdbootstrap.com/docs/standard/extended/square-buttons/) for detailed instructions & even more examples.
65

7-
To learn more read [Buttons Docs](https://mdbootstrap.com/docs/standard/components/buttons/).
6+
## Basic example
87

8+
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/basic.png)
99

10-
## Basic examples
11-
12-
#### Square button
13-
HTML
1410
```html
1511
<button type="button" class="btn btn-primary btn-square-md">Button</button>
1612
```
17-
CSS
13+
1814
```css
1915
.btn-square-md {
2016
width: 100px !important;
@@ -26,4 +22,91 @@ padding: 0px;
2622
font-size:12px;
2723
}
2824
```
29-
#### Much more examples and a detailed description can be found at [📄 Square Buttons documentation page](https://mdbootstrap.com/docs/standard/extended/square-buttons/)
25+
26+
## How to use?
27+
28+
1. Download MDB 5 - free UI KIT
29+
30+
2. Choose your favourite customized component and click on the image
31+
32+
3. Copy & paste the code into your MDB project
33+
34+
[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)
35+
36+
## More examples
37+
38+
[Bootstrap Responsive square button:
39+
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/black.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#black-button)
40+
41+
[Bootstrap Square button sizes:
42+
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/responsive.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#responsive-button)
43+
44+
[Bootstrap Square button colors:
45+
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/square.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#sizes)
46+
47+
[Bootstrap Square button outline:
48+
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/colors.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#colors)
49+
50+
[Bootstrap Square button social:
51+
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/outline.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#outline)
52+
53+
[Bootstrap Square button sample brands:
54+
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/social.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#social)
55+
56+
[Bootstrap Square button disabled state:
57+
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/disabled.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#disabled-state)
58+
59+
[Bootstrap Square button toggle states:
60+
![Bootstrap 5 Square Buttons](https://mdbootstrap.com/img/Marketing/github/square-button/toggle.png)](https://mdbootstrap.com/docs/standard/extended/square-buttons/#disabled-state)
61+
62+
___
63+
64+
## More extended Bootstrap documentation
65+
66+
<ul>
67+
<li><a href="https://mdbootstrap.com/docs/standard/extended/bootstrap-address-form/">Bootstrap Address Form</a></li>
68+
<li><a href="https://mdbootstrap.com/docs/standard/extended/avatar/">Bootstrap Avatar</a></li>
69+
<li><a href="https://mdbootstrap.com/docs/standard/extended/back-to-top/">Bootstrap Back To Top Button</a></li>
70+
<li><a href="https://mdbootstrap.com/docs/standard/extended/carousel-with-thumbnails/">Bootstrap Carousel Slider with Thumbnails</a></li>
71+
<li><a href="https://mdbootstrap.com/docs/standard/extended/chat/">Bootstrap Chat</a></li>
72+
<li><a href="https://mdbootstrap.com/docs/standard/extended/code/">Bootstrap Code Blocks</a></li>
73+
<li><a href="https://mdbootstrap.com/docs/standard/extended/comments/">Bootstrap Comments</a></li>
74+
<li><a href="https://mdbootstrap.com/docs/standard/extended/bootstrap-comparison-table/">Bootstrap Comparison Table</a></li>
75+
<li><a href="https://mdbootstrap.com/docs/standard/extended/credit-card/">Bootstrap Credit Card Form</a></li>
76+
<li><a href="https://mdbootstrap.com/docs/standard/extended/drawer/">Bootstrap Drawer</a></li>
77+
<li><a href="https://mdbootstrap.com/docs/standard/extended/dropdown-multilevel/">Bootstrap Nested Dropdown</a></li>
78+
<li><a href="https://mdbootstrap.com/docs/standard/extended/faq/">Bootstrap FAQ component / section</a></li>
79+
<li><a href="https://mdbootstrap.com/docs/standard/extended/gallery/">Bootstrap Gallery</a></li>
80+
<li><a href="https://mdbootstrap.com/docs/standard/extended/hamburger-menu/">Bootstrap Hamburger Menu</a></li>
81+
<li><a href="https://mdbootstrap.com/docs/standard/extended/bootstrap-invoice/">Bootstrap Invoice</a></li>
82+
<li><a href="https://mdbootstrap.com/docs/standard/extended/jumbotron/">Bootstrap Jumbotron</a></li>
83+
<li><a href="https://mdbootstrap.com/docs/standard/extended/login/">Bootstrap Login Form</a></li>
84+
<li><a href="https://mdbootstrap.com/docs/standard/extended/maps/">Bootstrap Maps</a></li>
85+
<li><a href="https://mdbootstrap.com/docs/standard/extended/media-object/">Bootstrap Media Object</a></li>
86+
<li><a href="https://mdbootstrap.com/docs/standard/extended/mega-menu/">Bootstrap Mega Menu</a></li>
87+
<li><a href="https://mdbootstrap.com/docs/standard/extended/multiselect/">Bootstrap Multiselect</a></li>
88+
<li><a href="https://mdbootstrap.com/docs/standard/extended/news-feed/">Bootstrap News Feed</a></li>
89+
<li><a href="https://mdbootstrap.com/docs/standard/extended/offcanvas/">Bootstrap Offcanvas</a></li>
90+
<li><a href="https://mdbootstrap.com/docs/standard/extended/order-details/">Bootstrap Order Details</a></li>
91+
<li><a href="https://mdbootstrap.com/docs/standard/extended/page-transitions/">Bootstrap Page Transitions</a></li>
92+
<li><a href="https://mdbootstrap.com/docs/standard/extended/payment-forms/">Bootstrap Payment Forms</a></li>
93+
<li><a href="https://mdbootstrap.com/docs/standard/extended/product-cards/">Bootstrap Product Cards</a></li>
94+
<li><a href="https://mdbootstrap.com/docs/standard/extended/profiles/">Bootstrap Profiles</a></li>
95+
<li><a href="https://mdbootstrap.com/docs/standard/extended/quotes/">Bootstrap Quotes</a></li>
96+
<li><a href="https://mdbootstrap.com/docs/standard/extended/registration/">Bootstrap Registration Form</a></li>
97+
<li><a href="https://mdbootstrap.com/docs/standard/extended/search-expanding/">Bootstrap Expanding Search Bar</a></li>
98+
<li><a href="https://mdbootstrap.com/docs/standard/extended/shopping-carts/">Bootstrap Shopping Carts</a></li>
99+
<li><a href="https://mdbootstrap.com/docs/standard/extended/side-navbar/">Bootstrap Side Navbar</a></li>
100+
<li><a href="https://mdbootstrap.com/docs/standard/extended/sidebar/">Bootstrap Sidebar</a></li>
101+
<li><a href="https://mdbootstrap.com/docs/standard/extended/social-media/">Bootstrap Social Media Icons & Buttons</a></li>
102+
<li><a href="https://mdbootstrap.com/docs/standard/extended/square-buttons/">Bootstrap Square Buttons</a></li>
103+
<li><a href="https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/">Bootstrap Survey Form</a></li>
104+
<li><a href="https://mdbootstrap.com/docs/standard/extended/testimonial-slider/">Bootstrap Testimonial Slider</a></li>
105+
<li><a href="https://mdbootstrap.com/docs/standard/extended/testimonials/">Bootstrap Testimonials</a></li>
106+
<li><a href="https://mdbootstrap.com/docs/standard/extended/textarea/">Bootstrap Textarea</a></li>
107+
<li><a href="https://mdbootstrap.com/docs/standard/extended/timeline/">Bootstrap Timeline</a></li>
108+
<li><a href="https://mdbootstrap.com/docs/standard/extended/to-do-list/">Bootstrap To Do List</a></li>
109+
<li><a href="https://mdbootstrap.com/docs/standard/extended/video-carousel/">Bootstrap Video Carousel / Gallery</a></li>
110+
<li><a href="https://mdbootstrap.com/docs/standard/extended/weather/">Bootstrap Weather</a></li>
111+
</ul>
112+

0 commit comments

Comments
 (0)