Square Buttons

Bootstrap 5 Square Buttons component

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

A collection of square buttons created with the latest Bootstrap 5. Black, disabled, full-width, outline, social, block square buttons examples.

To learn more read Buttons Docs.

Basic examples

Square button


            <button type="button" class="btn btn-primary btn-square-md">Button</button>
          

            .btn-square-md {
            width: 100px !important;
            max-width: 100% !important;
            max-height: 100% !important;
            height: 100px !important;
            text-align: center;
            padding: 0px;
            font-size:12px;
            }

Disable text wrapping

If you don’t want the button text to wrap, you can add the .text-nowrap class to the button. In Sass, you can set $btn-white-space: nowrap to disable text wrapping for each button.

Black square button


            <button type="button" class="btn btn-dark btn-square-md">Button</button>
          

            .btn-square-md {
            width: 100px !important;
            max-width: 100% !important;
            max-height: 100% !important;
            height: 100px !important;
            text-align: center;
            padding: 0px;
            font-size:12px;
            }

Responsive square button


            <button type="button" class="btn btn-dark btn-sq-responsive">Button</button>
          

            /* Style for Extra Large Screen */
            @media (max-width:3920px) {
            .btn-sq-responsive {
            width: 200px !important;
            max-width: 100% !important;
            max-height: 100% !important;
            height: 200px !important;
            font-size:24px;
            }
            }

            /* Style for Large Screen */
            @media (max-width:991px) {
            .btn-sq-responsive {
            width: 150px !important;
            max-width: 100% !important;
            max-height: 100% !important;
            height: 150px !important;
            font-size:18px;
            }
            }

            /* Style for Medium Screen */
            @media (max-width:767px) {
            .btn-sq-responsive {
            width: 100px !important; /* whatever width you want for medium screen */
            max-width: 100% !important;
            max-height: 100% !important;
            height: 100px !important; /* whatever height you want for medium screen */
            font-size:12px;
            }
            }

            /* Style for Small Screen */
            @media (max-width:575px) {
            .btn-sq-responsive {
            width: 50px !important; /* whatever width you want for mobile screen */
            max-width: 100% !important;
            max-height: 100% !important;
            height: 50px !important; /* whatever height you want for mobile screen */
            font-size:5px;
            padding: 0px;
            font-size:7px;
            }
            }

Square button sizes


            <button type="button" class="btn btn-secondary btn-square-sm">Button</button>
            <button type="button" class="btn btn-secondary btn-square-md">Button</button>
            <button type="button" class="btn btn-secondary btn-square-lg">Button</button>
            <button type="button" class="btn btn-secondary btn-square-xl">Button</button>
          

            .btn-square-sm {
            width: 50px !important;
            max-width: 100% !important;
            max-height: 100% !important;
            height: 50px !important;
            text-align: center;
            padding: 0px;
            font-size:7px;
            }

            .btn-square-md {
            width: 100px !important;
            max-width: 100% !important;
            max-height: 100% !important;
            height: 100px !important;
            text-align: center;
            padding: 0px;
            font-size:12px;
            }

            .btn-square-lg {
            width: 150px !important;
            max-width: 100% !important;
            max-height: 100% !important;
            height: 150px !important;
            text-align: center;
            padding: 0px;
            font-size:18px;
            }

            .btn-square-xl {
            width: 200px !important;
            max-width: 100% !important;
            max-height: 100% !important;
            height: 200px !important;
            text-align: center;
            padding: 0px;
            font-size:24px;
            }

Colors

MDB includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.


            <button type="button" class="btn btn-primary btn-square-md">Primary</button>
            <button type="button" class="btn btn-secondary btn-square-md">Secondary</button>
            <button type="button" class="btn btn-success btn-square-md">Success</button>
            <button type="button" class="btn btn-danger btn-square-md">Danger</button>
            <button type="button" class="btn btn-warning btn-square-md">Warning</button>
            <button type="button" class="btn btn-info btn-square-md">Info</button>
            <button type="button" class="btn btn-light btn-square-md" data-mdb-ripple-color="dark">Light</button>
            <button type="button" class="btn btn-dark btn-square-md"><small>Dark</small></button>
            <button type="button" class="btn btn-link btn-square-md" data-mdb-ripple-color="dark">Link</button>
          

            .btn-square-md {
            width: 100px !important;
            max-width: 100% !important;
            max-height: 100% !important;
            height: 100px !important;
            text-align: center;
            padding: 0px;
            font-size:12px;
            }

Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Outline

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button. 


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

          .btn-square-md {
          width: 100px !important;
          max-width: 100% !important;
          max-height: 100% !important;
          height: 100px !important;
          text-align: center;
          padding: 0px;
          font-size:12px;
          }

Social

Combining our icons and custom colors you can create social buttons. Combining our icons and custom colors you can create social buttons. See all available icons in our icons search (check "brands" to filter brand icons).

In the example below, we place a Facebook icon <i class="fab fa-facebook-f"></i> inside the button and set a background-color to #3B5998 (facebook brand color). 


          <button class="btn btn-primary btn-square-social" style="background-color: #3b5998;" href="#!" role="button">
            <i class="fab fa-facebook-f"></i>
          </button>
        

          .btn-square-social {
          width: 70px !important;
          max-width: 100% !important;
          max-height: 100% !important;
          height: 70px !important;
          text-align: center;
          padding: 0px;
          font-size: 15px;
          }

Sample brands

A few the most popular brands in form of social square buttons


          <!-- Facebook -->
          <a class="btn btn-primary" style="background-color: #3b5998;" href="#!" role="button"><i
              class="fab fa-facebook-f"></i></a>

          <!-- Twitter -->
          <a class="btn btn-primary" style="background-color: #55acee;" href="#!" role="button"><i
              class="fab fa-twitter"></i></a>

          <!-- Google -->
          <a class="btn btn-primary" style="background-color: #dd4b39;" href="#!" role="button"><i
              class="fab fa-google"></i></a>

          <!-- Instagram -->
          <a class="btn btn-primary" style="background-color: #ac2bac;" href="#!" role="button"><i
              class="fab fa-instagram"></i></a>

          <!-- Linkedin -->
          <a class="btn btn-primary" style="background-color: #0082ca;" href="#!" role="button"><i
              class="fab fa-linkedin-in"></i></a>

          <!-- Pinterest -->
          <a class="btn btn-primary" style="background-color: #c61118;" href="#!" role="button"><i
              class="fab fa-pinterest"></i></a>

          <!-- Vkontakte -->
          <a class="btn btn-primary" style="background-color: #4c75a3;" href="#!" role="button"><i
              class="fab fa-vk"></i></a>

          <!-- Stack overflow -->
          <a class="btn btn-primary" style="background-color: #ffac44;" href="#!" role="button"><i
              class="fab fa-stack-overflow"></i></a>

          <!-- Youtube -->
          <a class="btn btn-primary" style="background-color: #ed302f;" href="#!" role="button"><i
              class="fab fa-youtube"></i></a>

          <!-- Slack -->
          <a class="btn btn-primary" style="background-color: #481449;" href="#!" role="button"><i
              class="fab fa-slack-hash"></i></a>

          <!-- Github -->
          <a class="btn btn-primary" style="background-color: #333333;" href="#!" role="button"><i
              class="fab fa-github"></i></a>

          <!-- Dribbble -->
          <a class="btn btn-primary" style="background-color: #ec4a89;" href="#!" role="button"><i
              class="fab fa-dribbble"></i></a>

          <!-- Reddit -->
          <a class="btn btn-primary" style="background-color: #ff4500;" href="#!" role="button"><i
              class="fab fa-reddit-alien"></i></a>

          <!-- Whatsapp -->
          <a class="btn btn-primary" style="background-color: #25d366;" href="#!" role="button"><i
              class="fab fa-whatsapp"></i></a>
        

          .btn-square-social {
          width: 70px !important;
          max-width: 100% !important;
          max-height: 100% !important;
          height: 70px !important;
          text-align: center;
          padding: 0px;
          font-size: 15px;
          }

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering. 


          <button type="button" class="btn btn-primary btn-md" disabled>Primary button</button>
          <button type="button" class="btn btn-secondary btn-md" disabled>Button</button>
        

          .btn-square-lg {
          width: 150px !important;
          max-width: 100% !important;
          max-height: 100% !important;
          height: 150px !important;
          text-align: center;
          padding: 0px;
          font-size:18px;
          }

Toggle states

Add data-mdb-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the <button>. 


          <button type="button" class="btn btn-primary btn-square-md" data-mdb-toggle="button" autocomplete="off">
            Toggle button
          </button>
          <button type="button" class="btn btn-primary active btn-square-md" data-mdb-toggle="button" autocomplete="off"
            aria-pressed="true">
            Active toggle button
          </button>
          <button type="button" class="btn btn-primary btn-square-md" disabled data-mdb-toggle="button"
            autocomplete="off">
            Disabled toggle button
          </button>
        

          .btn-square-lg {
          width: 150px !important;
          max-width: 100% !important;
          max-height: 100% !important;
          height: 150px !important;
          text-align: center;
          padding: 0px;
          font-size:18px;
          }