دکمه‌ها

<div class="btn-list">
        <button type="button" class="btn btn-primary btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary btn-wave">Secondary</button>
        <button type="button" class="btn btn-success btn-wave">Success</button>
        <button type="button" class="btn btn-danger btn-wave">Danger</button>
        <button type="button" class="btn btn-warning btn-wave">Warning</button>
        <button type="button" class="btn btn-info btn-wave">Info</button>
        <button type="button" class="btn btn-light btn-wave">Light</button>
        <button type="button" class="btn btn-dark btn-wave text-white">Dark</button>
        <button type="button" class="btn btn-link btn-wave">Link</button>
    </div>

<div class="btn-list">
        <button type="button" class="btn btn-primary rounded-pill btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary rounded-pill btn-wave">Secondary</button>
        <button type="button" class="btn btn-success rounded-pill btn-wave">Success</button>
        <button type="button" class="btn btn-danger rounded-pill btn-wave">Danger</button>
        <button type="button" class="btn btn-warning rounded-pill btn-wave">Warning</button>
        <button type="button" class="btn btn-info rounded-pill btn-wave">Info</button>
        <button type="button" class="btn btn-light rounded-pill btn-wave">Light</button>
        <button type="button" class="btn btn-dark rounded-pill btn-wave text-white">Dark</button>
        <button type="button" class="btn btn-link rounded-pill btn-wave">Link</button>
    </div>

<div class="btn-list">
        <button type="button" class="btn btn-primary-light btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary-light btn-wave">Secondary</button>
        <button type="button" class="btn btn-success-light btn-wave">Success</button>
        <button type="button" class="btn btn-danger-light btn-wave">Danger</button>
        <button type="button" class="btn btn-warning-light btn-wave">Warning</button>
        <button type="button" class="btn btn-info-light btn-wave">Info</button>
        <button type="button" class="btn btn-purple-light btn-wave">purple</button>
        <button type="button" class="btn btn-teal-light btn-wave">teal</button>
        <button type="button" class="btn btn-orange-light btn-wave">orange</button>
    </div>

<div class="btn-list">
        <button type="button" class="btn btn-primary-light rounded-pill btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary-light rounded-pill btn-wave">Secondary</button>
        <button type="button" class="btn btn-success-light rounded-pill btn-wave">Success</button>
        <button type="button" class="btn btn-danger-light rounded-pill btn-wave">Danger</button>
        <button type="button" class="btn btn-warning-light rounded-pill btn-wave">Warning</button>
        <button type="button" class="btn btn-info-light rounded-pill btn-wave">Info</button>
        <button type="button" class="btn btn-purple-light rounded-pill btn-wave">purple</button>
        <button type="button" class="btn btn-teal-light rounded-pill btn-wave">teal</button>
        <button type="button" class="btn btn-orange-light rounded-pill btn-wave">orange</button>
    </div>

<div class="btn-list">
        <button type="button" class="btn btn-outline-primary btn-wave">Primary</button>
        <button type="button" class="btn btn-outline-secondary btn-wave">Secondary</button>
        <button type="button" class="btn btn-outline-success btn-wave">Success</button>
        <button type="button" class="btn btn-outline-danger btn-wave">Danger</button>
        <button type="button" class="btn btn-outline-warning btn-wave">Warning</button>
        <button type="button" class="btn btn-outline-info btn-wave">Info</button>
        <button type="button" class="btn btn-outline-light btn-wave">Light</button>
        <button type="button" class="btn btn-outline-dark btn-wave">Dark</button>
    </div>

<div class="btn-list">
        <button type="button" class="btn btn-outline-primary rounded-pill btn-wave">Primary</button>
        <button type="button" class="btn btn-outline-secondary rounded-pill btn-wave">Secondary</button>
        <button type="button" class="btn btn-outline-success rounded-pill btn-wave">Success</button>
        <button type="button" class="btn btn-outline-danger rounded-pill btn-wave">Danger</button>
        <button type="button" class="btn btn-outline-warning rounded-pill btn-wave">Warning</button>
        <button type="button" class="btn btn-outline-info rounded-pill btn-wave">Info</button>
        <button type="button" class="btn btn-outline-light rounded-pill btn-wave">Light</button>
        <button type="button" class="btn btn-outline-dark rounded-pill btn-wave">Dark</button>
    </div>

<div class="btn-list">
        <button type="button" class="btn btn-primary-gradient btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary-gradient btn-wave">Secondary</button>
        <button type="button" class="btn btn-success-gradient btn-wave">Success</button>
        <button type="button" class="btn btn-danger-gradient btn-wave">Danger</button>
        <button type="button" class="btn btn-warning-gradient btn-wave">Warning</button>
        <button type="button" class="btn btn-info-gradient btn-wave">Info</button>
        <button type="button" class="btn btn-orange-gradient btn-wave">Orange</button>
        <button type="button" class="btn btn-purple-gradient btn-wave">Purple</button>
        <button type="button" class="btn btn-teal-gradient btn-wave">Teal</button>
    </div>

<div class="btn-list">
        <button type="button" class="btn btn-primary-gradient rounded-pill btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary-gradient rounded-pill btn-wave">Secondary</button>
        <button type="button" class="btn btn-success-gradient rounded-pill btn-wave">Success</button>
        <button type="button" class="btn btn-danger-gradient rounded-pill btn-wave">Danger</button>
        <button type="button" class="btn btn-warning-gradient rounded-pill btn-wave">Warning</button>
        <button type="button" class="btn btn-info-gradient rounded-pill btn-wave">Info</button>
        <button type="button" class="btn btn-orange-gradient rounded-pill btn-wave">Orange</button>
        <button type="button" class="btn btn-purple-gradient rounded-pill btn-wave">Purple</button>
        <button type="button" class="btn btn-teal-gradient rounded-pill btn-wave">Teal</button>
    </div>

<div class="btn-list">
        <button type="button" class="btn btn-primary-ghost btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary-ghost btn-wave">Secondary</button>
        <button type="button" class="btn btn-success-ghost btn-wave">Success</button>
        <button type="button" class="btn btn-danger-ghost btn-wave">Danger</button>
        <button type="button" class="btn btn-warning-ghost btn-wave">Warning</button>
        <button type="button" class="btn btn-info-ghost btn-wave">Info</button>
        <button type="button" class="btn btn-orange-ghost btn-wave">Orange</button>
        <button type="button" class="btn btn-purple-ghost btn-wave">Purple</button>
        <button type="button" class="btn btn-teal-ghost btn-wave">Teal</button>
    </div>

<div class="btn-list">
        <a class="btn btn-primary btn-wave" href="javascript:void(0);" role="button">Link</a>
        <button class="btn btn-secondary btn-wave" type="submit">Button</button>
        <input class="btn btn-info" type="button" value="Input">
        <input class="btn btn-warning" type="submit" value="Submit">
        <input class="btn btn-success" type="reset" value="Reset">
    </div>

<div class="btn-list">
        <div class="mb-4">
            <button type="button" class="btn btn-primary" disabled="">Primary
                button</button>
            <button type="button" class="btn btn-secondary" disabled="">Button</button>
            <button type="button" class="btn btn-outline-primary" disabled="">Primary
                button</button>
            <button type="button" class="btn btn-outline-secondary" disabled="">Button</button>
        </div>

        <div>
            <a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary
                link</a>
            <a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>
        </div>
    </div>

<div class="btn-list">
                                        <div class="mb-4">
                                            <button type="button" class="btn btn-primary btn-wave" data-bs-toggle="button">دکمه تغییر حالت</button>
                                            <button type="button" class="btn btn-secondary active btn-wave" data-bs-toggle="button" aria-pressed="true">دکمه تغییر حالت فعال</button>
                                            <button type="button" class="btn btn-teal btn-wave" disabled data-bs-toggle="button">دکمه تغییر حالت غیرفعال</button>
                                        </div>
                                        <div>
                                            <a href="javascript:void(0);" class="btn btn-primary btn-wave" role="button" data-bs-toggle="button">لینک تغییر حالت</a>
                                            <a href="javascript:void(0);" class="btn btn-secondary active btn-wave" role="button" data-bs-toggle="button" aria-pressed="true">لینک تغییر حالت فعال</a>
                                            <a class="btn btn-teal disabled btn-wave" aria-disabled="true" role="button" data-bs-toggle="button">لینک تغییر حالت غیرفعال</a>
                                        </div>
                                    </div>

<div class="btn-list">
                                        <a class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">لینک اصلی</a>
                                        <a class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">لینک</a>
                                    </div>

<div class="btn-list d-md-flex flex-wrap">
        <button class="btn btn-primary btn-loader">
            <span class="me-2">در حال بارگذاری</span>
            <span class="loading"><i class="ri-loader-2-fill fs-16"></i></span>
        </button>
        <button class="btn btn-outline-secondary btn-loader">
            <span class="me-2">در حال بارگذاری</span>
            <span class="loading"><i class="ri-loader-2-fill fs-16"></i></span>
        </button>
        <button class="btn btn-info-light btn-loader">
            <span class="me-2">در حال بارگذاری</span>
            <span class="loading"><i class="ri-loader-4-line fs-16"></i></span>
        </button>
        <button class="btn btn-warning-light btn-loader">
            <span class="me-2">در حال بارگذاری</span>
            <span class="loading"><i class="ri-loader-5-line fs-16"></i></span>
        </button>
        <button class="btn btn-success btn-loader disabled">
            <span class="me-2">Disabled</span>
            <span class="loading"><i class="ri-refresh-line fs-16"></i></span>
        </button>
    </div>

<div class="btn-list d-md-flex d-block">
        <div class="mb-md-0 mb-2">
            <button class="btn btn-icon btn-primary btn-wave">
                <i class="ri-bank-fill align-middle"></i>
            </button>
            <button class="btn btn-icon btn-info btn-wave">
                <i class="ri-medal-line align-middle"></i>
            </button>
            <button class="btn btn-icon btn-danger btn-wave">
                <i class="ri-archive-line align-middle"></i>
            </button>
            <button class="btn btn-icon btn-warning btn-wave me-5">
                <i class="ri-calendar-2-line align-middle"></i>
            </button>
        </div>
        <div class="mb-md-0 mb-2">
            <button class="btn btn-icon btn-primary-light rounded-pill btn-wave">
                <i class="ri-home-smile-line align-middle"></i>
            </button>
            <button class="btn btn-icon btn-secondary-light rounded-pill btn-wave">
                <i class="ri-delete-bin-line align-middle"></i>
            </button>
            <button class="btn btn-icon btn-success-light rounded-pill btn-wave">
                <i class="ri-notification-3-line align-middle"></i>
            </button>
            <button class="btn btn-icon btn-danger-light rounded-pill btn-wave me-5">
                <i class="ri-chat-settings-line align-middle"></i>
            </button>
        </div>
        <div class="">
            <button class="btn btn-icon btn-outline-primary rounded-pill btn-wave">
                <i class="ri-phone-line align-middle"></i>
            </button>
            <button class="btn btn-icon btn-outline-teal rounded-pill btn-wave">
                <i class="ri-customer-service-2-line align-middle"></i>
            </button>
            <button class="btn btn-icon btn-outline-success rounded-pill btn-wave">
                <i class="ri-live-line align-middle"></i>
            </button>
            <button class="btn btn-icon btn-outline-secondary rounded-pill btn-wave">
                <i class="ri-save-line align-middle"></i>
            </button>
        </div>
    </div> 

<div class="btn-list d-md-flex d-block">
        <div class="mb-md-0 mb-2">
            <button class="btn btn-icon btn-primary btn-wave">
                <i class="ri-bank-fill align-middle"></i>
            </button>
            <button class="btn btn-icon btn-info btn-wave">
                <i class="ri-medal-line align-middle"></i>
            </button>
            <button class="btn btn-icon btn-danger btn-wave">
                <i class="ri-archive-line align-middle"></i>
            </button>
        </div>
        <div class="mb-md-0 mb-2">
            <button class="btn btn-icon btn-primary-light rounded-pill btn-wave">
                <i class="ri-home-smile-line align-middle"></i>
            </button>
            <button class="btn btn-icon btn-secondary-light rounded-pill btn-wave">
                <i class="ri-delete-bin-line align-middle"></i>
            </button>
            <button class="btn btn-icon btn-success-light rounded-pill btn-wave">
                <i class="ri-notification-3-line align-middle"></i>
            </button>
        </div>
        <div class="">
            <button class="btn btn-icon btn-outline-primary rounded-pill btn-wave">
                <i class="ri-phone-line align-middle"></i>
            </button>
            <button class="btn btn-icon btn-outline-teal rounded-pill btn-wave">
                <i class="ri-customer-service-2-line align-middle"></i>
            </button>
            <button class="btn btn-icon btn-outline-success rounded-pill btn-wave">
                <i class="ri-live-line align-middle"></i>
            </button>
        </div>
    </div> 

<div class="btn-list">
        <button class="btn btn-icon btn-facebook btn-wave">
            <i class="ri-facebook-line"></i>
        </button>
        <button class="btn btn-icon btn-twitter btn-wave">
            <i class="ri-twitter-x-line"></i>
        </button>
        <button class="btn btn-icon btn-instagram btn-wave">
            <i class="ri-instagram-line"></i>
        </button>
        <button class="btn btn-icon btn-github btn-wave">
            <i class="ri-github-line"></i>
        </button>
        <button class="btn btn-icon btn-youtube btn-wave">
            <i class="ri-youtube-line"></i>
        </button>
        <button class="btn btn-icon btn-google btn-wave">
            <i class="ri-google-line"></i>
        </button>
    </div>

<div class="btn-list d-flex">
        <div class="me-5">
            <button class="btn btn-primary shadow-sm btn-wave">دکمه</button>
            <button class="btn btn-primary shadow btn-wave">دکمه</button>
            <button class="btn btn-primary shadow-lg btn-wave">دکمه</button>
        </div>
        <div>
            <button class="btn btn-secondary btn-sm shadow-sm btn-wave">دکمه</button>
            <button class="btn btn-info shadow btn-wave">دکمه</button>
            <button class="btn btn-lg btn-success shadow-lg btn-wave">دکمه</button>
        </div>
    </div>

<div class="btn-list">
        <button class="btn btn-primary shadow-primary btn-wave">دکمه</button>
        <button class="btn btn-secondary shadow-secondary btn-wave">دکمه</button>
        <button class="btn btn-success shadow-success btn-wave">دکمه</button>
        <button class="btn btn-info shadow-info btn-wave">دکمه</button>
        <button class="btn btn-warning shadow-warning btn-wave">دکمه</button>
        <button class="btn btn-danger shadow-danger btn-wave">دکمه</button>
        <button class="btn btn-purple shadow-purple btn-wave">دکمه</button>
        <button class="btn btn-orange shadow-orange btn-wave">دکمه</button>
    </div>

<div class="btn-list">
        <button class="btn btn-primary btn-raised-shadow btn-wave">دکمه</button>
        <button class="btn btn-secondary btn-raised-shadow btn-wave">دکمه</button>
        <button class="btn btn-success btn-raised-shadow btn-wave">دکمه</button>
        <button class="btn btn-info btn-raised-shadow btn-wave">دکمه</button>
        <button class="btn btn-warning btn-raised-shadow btn-wave">دکمه</button>
        <button class="btn btn-danger btn-raised-shadow btn-wave">دکمه</button>
        <button class="btn btn-purple btn-raised-shadow btn-wave">دکمه</button>
        <button class="btn btn-orange btn-raised-shadow btn-wave">دکمه</button>
    </div>

<div class="btn-list">
        <button class="btn btn-primary label-btn">
            <i class="ri-chat-smile-line label-btn-icon me-2"></i>
            Primary
        </button>
        <button class="btn btn-secondary label-btn">
            <i class="ri-settings-4-line label-btn-icon me-2"></i>
            Secondary
        </button>
        <button class="btn btn-warning label-btn rounded-pill">
            <i class="ri-spam-2-line label-btn-icon me-2 rounded-pill"></i>
            Warning
        </button>
        <button class="btn btn-info label-btn rounded-pill">
            <i class="ri-phone-line label-btn-icon me-2 rounded-pill"></i>
            Info
        </button>
        <button class="btn btn-success label-btn label-end">
            Success
            <i class="ri-thumb-up-line label-btn-icon ms-2"></i>
        </button>
        <button class="btn btn-danger label-btn label-end rounded-pill">
            Cancel
            <i class="ri-close-line label-btn-icon ms-2 rounded-pill"></i>
        </button>
    </div>

<div class="btn-list">
                <button class="btn btn-info custom-button rounded-pill">
                    <span class="custom-btn-icons"><i class="ri-twitter-x-line text-info"></i></span>
                    Twitter
                </button>
                <button class="btn btn-teal-light btn-border-down">Border</button>
                <button class="btn btn-secondary-light btn-border-start">Border</button>
                <button class="btn btn-purple-light btn-border-end">Border</button>
                <button class="btn btn-warning-light btn-border-top">Border</button>
                <button class="btn btn-secondary btn-glare"><span>Glare Button</span></button>
                <button class="btn btn-danger btn-hover btn-hover-animate">Like</button>
                <button class="btn btn-success btn-darken-hover">Hover</button>
                <button class="btn btn-orange btn-custom-border">Hover</button>
            </div>

<div class="btn-list">
        <div class="d-grid gap-2 mb-4">
            <button class="btn btn-primary btn-wave" type="button">دکمه</button>
            <button class="btn btn-secondary btn-wave" type="button">دکمه</button>
        </div>
        <div class="d-grid gap-2 d-md-block">
            <button class="btn btn-info btn-wave" type="button">دکمه</button>
            <button class="btn btn-success btn-wave" type="button">دکمه</button>
        </div>
        <div class="d-grid gap-2 col-6 mx-auto">
            <button class="btn btn-danger btn-wave" type="button">دکمه</button>
            <button class="btn btn-warning btn-wave" type="button">دکمه</button>
        </div>
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button class="btn btn-teal me-md-2 btn-wave" type="button">دکمه</button>
            <button class="btn btn-purple btn-wave" type="button">دکمه</button>
        </div>
    </div>