Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

https://getbootstrap.com/docs/5.1/components/buttons/

Examples

Preview
HTML

Solid color

Soft color

Outline

Pill

                  
                    <!--
                      
                      Colors
                      .btn-primary
                      .btn-secondary
                      .btn-success
                      .btn-danger
                      .btn-warning
                      .btn-info
                      .btn-light
                      .btn-dark

                      added by smarty
                      .btn-indogo
                      .btn-danger

                      Sizes
                      .btn-sm
                      .btn-lg

                    -->

                    <!-- solid color -->
                    <button type="button" class="btn btn-primary">Primary</button>

                    <!-- soft color -->
                    <button type="button" class="btn btn-soft btn-primary">Primary</button>

                    <!-- outline -->
                    <button type="button" class="btn btn-outline-primary">Primary</button>

                    <!-- pill -->
                    <button type="button" class="btn btn-primary rounded-pill">Primary</button>

Icon buttons

Preview
HTML

                  
                    <!--
                      
                      Colors
                      .btn-primary
                      .btn-secondary
                      .btn-success
                      .btn-danger
                      .btn-warning
                      .btn-info
                      .btn-light
                      .btn-dark

                      added by smarty
                      .btn-indogo
                      .btn-danger

                      Sizes
                      .btn-sm
                      .btn-lg
                    -->

                    <button type="button" class="btn btn-lg rounded-circle btn-primary mb-2">
                      <i class="fi fi-check"></i>
                    </button>

Hover animated

Preview
HTML

Zoom Zoom

                  
                    <!--
                      
                      Colors
                      .btn-primary
                      .btn-secondary
                      .btn-success
                      .btn-danger
                      .btn-warning
                      .btn-info
                      .btn-light
                      .btn-dark

                      added by smarty
                      .btn-indogo
                      .btn-danger

                      Sizes
                      .btn-sm
                      .btn-lg
                    -->

                    <!-- hover transition -->
                    <button type="button" class="btn btn-primary transition-hover-top mb-1">Top</button>
                    <button type="button" class="btn btn-primary transition-hover-right mb-1">Right</button>
                    <button type="button" class="btn btn-primary transition-hover-bottom mb-1">Bottom</button>
                    <button type="button" class="btn btn-primary transition-hover-left mb-1">Left</button>


                    <!-- no shadow -->
                    <button type="button" class="btn btn-primary shadow-none mb-1">No hover shadow</button>


                    <!-- hover zoom -->
                    <button type="button" class="btn btn-primary transition-hover-zoom mb-1">Zoom</button>

Social buttons

Preview
HTML

facebook twitter linkedin vimeo youtube snapchat email

                  
                    <!-- 

                      Classes
                        .btn-facebook
                        .btn-instagram
                        .btn-twitter
                        .btn-linkedin
                        .btn-pinterest
                        .btn-paypal
                        .btn-skype
                        .btn-vimeo
                        .btn-youtube
                        .btn-github
                        .btn-email
                        .btn-googleplay
                        .btn-snapchat

                      Sizes
                        .btn-sm
                        .btn-lg
                    -->
                    <a href="#" class="btn btn-facebook transition-hover-top" rel="noopener" target="_blank">facebook</a>

                    <a href="#" class="btn btn-sm btn-facebook transition-hover-top" rel="noopener" target="_blank">
                      <i class="fi fi-social-facebook"></i> 
                      <span>facebook</span>
                    </a>

                    <a href="#" class="btn btn-sm btn-twitter transition-hover-top" rel="noopener" target="_blank">
                      <i class="fi fi-social-twitter"></i> 
                      <span>twitter</span>
                    </a>

                    <a href="#" class="btn btn-sm btn-linkedin transition-hover-top" rel="noopener" target="_blank">
                      <i class="fi fi-social-linkedin"></i> 
                      <span>linkedin</span>
                    </a>

                    <a href="#" class="btn btn-sm btn-vimeo transition-hover-top" rel="noopener" target="_blank">
                      <i class="fi fi-social-vimeo"></i> 
                      <span>vimeo</span>
                    </a>

                    <a href="#" class="btn btn-sm btn-youtube transition-hover-top" rel="noopener" target="_blank">
                      <i class="fi fi-social-youtube"></i> 
                      <span>youtube</span>
                    </a>

                    <a href="#" class="btn btn-sm btn-snapchat transition-hover-top text-dark" rel="noopener" target="_blank">
                      <i class="fi fi-social-snapchat"></i> 
                      <span>snapchat</span>
                    </a>

                    <a href="#" class="btn btn-sm btn-email transition-hover-top" rel="noopener" target="_blank">
                      <i class="fi fi-envelope-2"></i> 
                      <span>email</span>
                    </a>

Download on the App Store Download on the Play Store

                  
                    <!-- App Store -->
                    <a href="#" class="btn btn-dark rounded-xl transition-hover-top">
                      <i class="float-start">
                        <svg height="32" viewBox="0 0 90 90">
                          <path fill="#ffffff" d="M49.645 6.817c3.232-3.8 8.695-6.627 13.203-6.817.575 5.279-1.541 10.565-4.669 14.374-3.133 3.802-8.261 6.764-13.294 6.369-.684-5.165 1.851-10.551 4.76-13.926zm25.646 72.01c-3.741 5.485-7.61 10.938-13.718 11.053-6.012.114-7.938-3.571-14.799-3.571-6.866 0-9.016 3.457-14.69 3.686-5.897.222-10.382-5.926-14.152-11.387-7.703-11.168-13.585-31.576-5.677-45.35 3.916-6.84 10.934-11.167 18.537-11.282 5.792-.107 11.263 3.917 14.799 3.917 3.544 0 10.185-4.831 17.165-4.122 2.922.121 11.123 1.181 16.391 8.912-.417.274-9.789 5.745-9.676 17.141.114 13.614 11.891 18.137 12.029 18.199-.108.32-1.884 6.459-6.209 12.804z"></path>
                        </svg>
                      </i>

                      <span class="float-start text-align-start px-2">
                        <span class="d-block lh-1 small">Download on the</span>
                        <span class="d-block lh-1 pt-1">App Store</span>
                      </span>
                    </a>

                    <!-- Play Store -->
                    <a href="#" class="btn btn-dark rounded-xl transition-hover-top">
                      <i class="float-start">
                        <svg height="32" viewBox="0 0 512 512">
                          <path fill="#ffffff" d="M99.617 8.057c-11.664-7.537-25.674-9.815-38.815-6.713l230.932 230.933 74.846-74.846-266.963-149.374zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877-235.877-235.879zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711l-230.918 230.918c3.786.891 7.639 1.371 11.492 1.371 9.522 0 19.011-2.708 27.31-8.07l266.965-149.372-74.849-74.847z"></path>
                        </svg>
                      </i>

                      <span class="float-start text-align-start px-2">
                        <span class="d-block lh-1 small">Download on the</span>
                        <span class="d-block lh-1 pt-1">Play Store</span>
                      </span>
                    </a>

Icon correction

When using icons, the text is too close because there is no margin.
To avoid using  , Smarty will add required margins to icons and few corrections are needed in some situations:

1. Icon only, no text

class .m-0 added directly to the icon

bad good nothing required

                  
                    <!-- bad -->
                    <a href="#" class="btn btn-primary">
                      <i class="fi fi-check"></i>
                    </a>

                    <!-- good -->
                    <a href="#" class="btn btn-primary">
                      <i class="fi fi-check m-0"></i>
                    </a>

                    <!-- nothing required -->
                    <a href="#" class="btn btn-primary rounded-circle">
                      <i class="fi fi-check"></i>
                    </a>

2. Icon after text only

text is wrapped inside <span>

Bad Good Nothing required

                  
                    <!-- bad -->
                    <a href="#" class="btn btn-primary">
                      Bad
                      <i class="fi fi-arrow-end"></i>
                    </a>

                    <!-- good -->
                    <a href="#" class="btn btn-primary">
                      <span>Good</span>
                      <i class="fi fi-arrow-end"></i>
                    </a>

                    <!-- nothing required -->
                    <a href="#" class="btn btn-primary">
                      <i class="fi fi-arrow-end"></i>
                      Nothing required
                    </a>