btn.active border shadows added in beta2 cause issues

Created by: grashoper20

btn.active seems to have 2 documented purposes and that seems to have lead to a visual bugs visible in the current documentation examples. Active is both the state for "Buttons will appear pressed" per the active state documentation and "toggled" in the toggled state documentation. For standalone buttons the shadow of a "pressed" button that was added doesn't seem problematic though possibly undesirable in some cases. But when grouping buttons in a btn-group it is problematic because it leads to consecutive "pressed" buttons having overlapping shadows.

You can try for you self in the docs: https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

Or use this modified docs code for test case

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" checked autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

When you select multiple buttons in this case you get overlap of the shadows leading to ugly darker blocks near the edges of the buttons.

Note: Definitely a duplicate of #24711 (closed) but can't reopen and realize it closed comments probably won't be seen so opening a new issue with a more clear purpose.