Secondary Button

                                       
  
   
       <div class="card-body">
         <button type="button" class="btn btn-secondary me-3">Secondary</button>
         <button type="button" class="btn btn-secondary me-3 disabled">Disabled button</button>
         <button type="button" class="btn btn-secondary btn-sm me-3 active">Pressed button</button>
         <button type="button" class="btn btn-secondary btn-sm me-3">Small button</button>
         <button type="button" class="btn btn-secondary btn-lg me-3">Large button</button>
</div>
                

                                       
  
   
         
            [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
               cursor: pointer;
           }
           .btn {
               border-radius: 6px;
               text-transform: capitalize;
               font-weight: 600;
               margin-bottom: 5px;
           }
           .btn-secondary {
               --bs-btn-color: #167df5;
               --bs-btn-bg: #ffffff;
               --bs-btn-border-color: #ffffff;
           }
           .btn-secondary {
               margin-bottom: 5px;
           }
           .me-3 {
               margin-right: 1rem!important;
           }
           .btn-secondary {
               --bs-btn-color: #fff;
               --bs-btn-bg: #6c757d;
               --bs-btn-border-color: #6c757d;
               --bs-btn-hover-color: #fff;
               --bs-btn-hover-bg: #5c636a;
               --bs-btn-hover-border-color: #565e64;
               --bs-btn-focus-shadow-rgb: 130,138,145;
               --bs-btn-active-color: #fff;
               --bs-btn-active-bg: #565e64;
               --bs-btn-active-border-color: #51585e;
               --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
               --bs-btn-disabled-color: #fff;
               --bs-btn-disabled-bg: #6c757d;
               --bs-btn-disabled-border-color: #6c757d;
           }
           .btn {
               --bs-btn-padding-x: 0.75rem;
               --bs-btn-padding-y: 0.375rem;
               --bs-btn-font-family: ;
               --bs-btn-font-size: 1rem;
               --bs-btn-font-weight: 400;
               --bs-btn-line-height: 1.5;
               --bs-btn-color: #212529;
               --bs-btn-bg: transparent;
               --bs-btn-border-width: 1px;
               --bs-btn-border-color: transparent;
               --bs-btn-border-radius: 0.375rem;
               --bs-btn-hover-border-color: transparent;
               --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
               --bs-btn-disabled-opacity: 0.65;
               --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
               display: inline-block;
               padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
               font-family: var(--bs-btn-font-family);
               font-size: var(--bs-btn-font-size);
               font-weight: var(--bs-btn-font-weight);
               line-height: var(--bs-btn-line-height);
               color: var(--bs-btn-color);
               text-align: center;
               text-decoration: none;
               vertical-align: middle;
               cursor: pointer;
               -webkit-user-select: none;
               -moz-user-select: none;
               user-select: none;
               border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
               border-radius: var(--bs-btn-border-radius);
               background-color: var(--bs-btn-bg);
               transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
           }
           [type=button], [type=reset], [type=submit], button {
               -webkit-appearance: button;
           }
           button, select {
               text-transform: none;
           }
           
           .btn-secondary.btn:hover {
               color: var(--bs-btn-hover-color);
               background-color: #61a7f8;
               border-color: #61a7f8;
           }
           
           
           element.style {
           }
           .btn-secondary.btn:hover {
               color: var(--bs-btn-hover-color);
               background-color: #61a7f8;
               border-color: #61a7f8;
           }
           .btn:hover {
               color: var(--bs-btn-hover-color);
               background-color: var(--bs-btn-hover-bg);
               border-color: var(--bs-btn-hover-border-color);
           }
           [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
               cursor: pointer;
           }
           .btn {
               border-radius: 6px;
               text-transform: capitalize;
               font-weight: 600;
               margin-bottom: 5px;
           }
           .btn-secondary {
               --bs-btn-color: #167df5;
               --bs-btn-bg: #ffffff;
               --bs-btn-border-color: #ffffff;
           }
           .btn-secondary.btn.disabled {
               background-color: #ffffff;
               opacity: 30%;
               border: none;
               color: #61a7f8;
           }
           .btn-group-sm>.btn, .btn-sm {
               --bs-btn-padding-y: 0.25rem;
               --bs-btn-padding-x: 0.5rem;
               --bs-btn-font-size: 0.875rem;
               --bs-btn-border-radius: 0.25rem;
           }