Square Buttons

Bootstrap 5 Square Buttons component

Responsive Square Buttons built with Bootstrap 5 & HTML. Disabled button, black, full-width outline, social button, big button, block square button & more.

Basic examples

Square button

A simple square bootstrap button with equal width and height.

Edit in sandbox 
        
            
            <button type="button" data-mdb-button-init data-mdb-ripple-init 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

You can customize square button colors using CSS or our default color classes.

Edit in sandbox 
        
            
            <button type="button" data-mdb-button-init data-mdb-ripple-init 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

This square button will change its size when the viewport size changes - in accordance with default viewport breakpoints.

Edit in sandbox 
        
            
            <button type="button" data-mdb-button-init data-mdb-ripple-init 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

Small, medium, large and extra large square button sizes - mirroring the standard button behavior.

Edit in sandbox 
        
            
            <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary btn-square-sm">Button</button>
            <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary btn-square-md">Button</button>
            <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary btn-square-lg">Button</button>
            <button type="button" data-mdb-button-init data-mdb-ripple-init 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.

Edit in sandbox 
        
            
            <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-square-md">Primary</button>
            <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary btn-square-md">Secondary</button>
            <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-success btn-square-md">Success</button>
            <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-danger btn-square-md">Danger</button>
            <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-warning btn-square-md">Warning</button>
            <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-info btn-square-md">Info</button>
            <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light btn-square-md" data-mdb-ripple-color="dark">Light</button>
            <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-dark btn-square-md"><small>Dark</small></button>
            <button type="button" data-mdb-button-init data-mdb-ripple-init 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.

Edit in sandbox 
        
            
          <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary btn-square-md" data-mdb-ripple-color="dark">
            Primary
          </button>
          <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-secondary btn-square-md" data-mdb-ripple-color="dark">
            Secondary
          </button>
          <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-success btn-square-md" data-mdb-ripple-color="dark">
            Success
          </button>
          <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-danger btn-square-md" data-mdb-ripple-color="dark">
            Danger
          </button>
          <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-warning btn-square-md" data-mdb-ripple-color="dark">
            Warning
          </button>
          <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-info btn-square-md" data-mdb-ripple-color="dark">
            Info
          </button>
          <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-light btn-square-md" data-mdb-ripple-color="dark">
            Light
          </button>
          <button type="button" data-mdb-button-init data-mdb-ripple-init 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).

Edit in sandbox 
        
            
          <button data-mdb-button-init data-mdb-ripple-init 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

          <!-- Whatsapp -->
          <a data-mdb-ripple-init 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.

Edit in sandbox 
        
            
          <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-md" disabled>Primary button</button>
          <button type="button" data-mdb-button-init data-mdb-ripple-init 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>.

Edit in sandbox 
        
            
          <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-square-md" data-mdb-toggle="button" autocomplete="off">
            Toggle button
          </button>
          <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary active btn-square-md" data-mdb-toggle="button" autocomplete="off"
            aria-pressed="true">
            Active toggle button
          </button>
          <button type="button" data-mdb-button-init data-mdb-ripple-init 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;
          }