Negative Button


Copy
  
   
        <button type="button" class="btn btn-negative me-3">Button</button>
            <button type="button" class="btn btn-negative me-3 disabled">Button</button>
            <button type="button" class="btn btn-negative me-3 active">Button</button>
            <button type="button" class="btn btn-negative btn-sm me-3">Button</button>
            <button type="button" class="btn btn-negative btn-lg me-3">Button</button>
     
Copy
  
   
      
         .btn-negative {
          background-color: #ffffff !important;
          border-color: #ffffff !important;
        }
        
        .btn-negative {
          --bs-btn-color: #e33e16;
          --bs-btn-bg: #dc3545;
          --bs-btn-border-color: #dc3545;
          --bs-btn-hover-color: #fff;
          --bs-btn-hover-bg: #bb2d3b;
          --bs-btn-hover-border-color: #b02a37;
          --bs-btn-focus-shadow-rgb: 225,83,97;
          --bs-btn-active-color: #fff;
          --bs-btn-active-bg: #b02a37;
          --bs-btn-active-border-color: #a52834;
          --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
          --bs-btn-disabled-color: #fff;
          --bs-btn-disabled-bg: #dc3545;
          --bs-btn-disabled-border-color: #dc3545;
        }
        
        .btn-negative.btn:hover {
          background-color: #EC7C61 !important;
          border-color: #EC7C61 !important;
        }
        
        .btn-negative.active
         {
          background: #9a2a0f!important;
          border: none;
        }
        
        .btn-negative.disabled {
          background: #ffffff !important;
          color: #e33e16 !important;
        }