컴포넌트 - 버튼

    <style>
        body {
            padding: 3rem;
        }

        button {
            margin-bottom: 1rem;
            margin-left: 1rem;
        }
        .btn-group-vertical button{
            margin-bottom: 0;
        }
    </style>

   <!-- BUTTONS -->

    <button class="btn">Transparent</button>
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-danger">Danger</button>
    <button class="btn btn-warning">Warning</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-light">Light</button>
    <button class="btn btn-dark">Dark</button>
    <button class="btn btn-link">link</button>

    <hr><br>

    <!-- BUTTON OUTLINE -->

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

    <hr><br>

    <!-- BUTTON SIZES -->

    <button class="btn btn-primary btn-lg">Large Button</button>
    <button class="btn btn-primary">Regular Button</button>
    <button class="btn btn-primary btn-sm">Small Button</button>

    <hr><br>

    <!-- BLOCK BUTTONS -->

    <div class="d-grid">
        <button class="btn btn-primary">Button</button>
        <button class="btn btn-primary">Button</button>
    </div>

    <hr><br>

    <!-- TOGGLING BUTTON -->

    <button class="btn btn-primary" data-bs-toggle="button">Toggle button</button>

    <hr><br>

    <!-- BUTTON GROUP -->

    <div class="btn-group">
        <button class="btn btn-primary">left</button>
        <button class="btn btn-primary">middle</button>
        <button class="btn btn-primary">right</button>
    </div>

    <div class="btn-group">
        <button class="btn btn-danger">left</button>
        <button class="btn btn-info">middle</button>
        <button class="btn btn-warning">right</button>
    </div>

    <!-- BUTTON GROUP SIZING -->

    <div class="btn-group btn-group-lg">
        <button class="btn btn-primary">left</button>
        <button class="btn btn-primary">middle</button>
        <button class="btn btn-primary">right</button>
    </div>

    <div class="btn-group btn-group-sm">
        <button class="btn btn-primary">left</button>
        <button class="btn btn-primary">middle</button>
        <button class="btn btn-primary">right</button>
    </div>

    <hr><br>

    <!-- VERTICAL BUTTON GROUP -->

    <div class="btn-group-vertical">
        <button class="btn btn-primary">Top</button>
        <button class="btn btn-primary">Middle</button>
        <button class="btn btn-primary">Bottom</button>
    </div>