Primary Button

   
   
      <div>
         <button type="button" class="btn btn-primary me-3">Primary Button</button>
         <button type="button" class="btn btn-primary me-3 disabled">Disabled button</button>
         <button type="button" class="btn btn-primary me-3 active">Pressed button</button>
         <button type="button" class="btn btn-primary btn-sm me-3">Small button</button>
         <button type="button" class="btn btn-primary 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-primary {
            --bs-btn-color: #fff;
            --bs-btn-bg: #167DF5;
            --bs-btn-border-color: #167DF5;
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: #61A7F8;
            --bs-btn-hover-border-color: #ABD0FB;
            --bs-btn-focus-shadow-rgb: 49,132,253;
            --bs-btn-active-color: #fff;
            --bs-btn-active-bg: #0D67CB;
            --bs-btn-active-border-color: #ABD0FB;
            --bs-btn-active-shadow: inset 0 3px 5pxrgba(0, 0, 0, 0.125);
            --bs-btn-disabled-color: #fff;
            --bs-btn-disabled-bg: #0d6efd;
            --bs-btn-disabled-border-color: #0d6efd;
            line-height: 1.3800000;
        }
        .me-3 {
            margin-right: 1rem!important;
        }
        
        .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;
        }