<div class="container">
  <button class="btn">Button</button>
  <button class="btn active">Button</button>
</div>
/* Try to change order: */

@layer bootstrap, my-base, my-styles;

/* Importing Bootstrap as layer Bootstrap: */

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css")
layer(bootstrap);

/* Cascade Layers: */

@layer my-styles {
  .btn {
    background: #abab9d !important;
  }
}

@layer my-base {
  body {
    margin: 2rem;
    background-color: #f2f0ec;
  }

  .btn {
    background: #8c4615 !important;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.