semantic OR button groups for bootstrap

Bootstrap-OR-btn-group.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="btn-group choice mt-5">
  <button class="btn btn-danger" role="button">Cancel</button>
  <div class="or"></div>
  <button class="btn btn-success" role="button">Save</button>
</div>

browserslist

> 1%
last 2 versions

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$or-btn-padding: 1rem;

.btn-group.choice{
  &:first-child{
    padding-right: $or-btn-padding;
  }
  
  .or {
    position: relative;
    width: 0.3em;
    height: 2.57142857em;
    z-index: 3;
    
    &:before{
      position: absolute;
      text-align: center;
      border-radius: 500rem;
      content: 'or';

      top: 50%;
      left: 50%;
      background-color: #FFFFFF;
      text-shadow: none;
      margin-top: -0.89285714em;
      margin-left: -0.89285714em;
      width: 1.78571429em;
      height: 1.78571429em;
      line-height: 1.78571429em;
      color: rgba(0, 0, 0, 0.4);
      font-style: normal;
      font-weight: bold;
      box-shadow: 0px 0px 0px 1px transparent inset;
    }
    
    &[data-text]:before {
      content: attr(data-text);
    }
  }
  
  &:last-child{
    padding-left: $or-btn-padding;
  }
}

SassMeister-output.css

.btn-group.choice:first-child { padding-right: 1rem; }
.btn-group.choice .or { position: relative; width: 0.3em; height: 2.57142857em; z-index: 3; }
.btn-group.choice .or:before { position: absolute; text-align: center; border-radius: 500rem; content: 'or'; top: 50%; left: 50%; background-color: #FFFFFF; text-shadow: none; margin-top: -0.89285714em; margin-left: -0.89285714em; width: 1.78571429em; height: 1.78571429em; line-height: 1.78571429em; color: rgba(0, 0, 0, 0.4); font-style: normal; font-weight: bold; box-shadow: 0px 0px 0px 1px transparent inset; }
.btn-group.choice .or[data-text]:before { content: attr(data-text); }
.btn-group.choice:last-child { padding-left: 1rem; }

SassMeister-rendered.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="btn-group choice mt-5">
  <button class="btn btn-danger" role="button">Cancel</button>
  <div class="or"></div>
  <button class="btn btn-success" role="button">Save</button>
</div>