button.ribbon {
  margin: 20px 0;
  #line-height: 44px;
  position: relative;
  cursor: pointer;
  user-select: none;
  outline: none !important;
  width: 100%;
  outline: none;
  outline-color: transparent;
}

button:active.ribbon {
  outline: none;
}

button.ribbon:before, button.ribbon:after {
  top: 8px;
  z-index: -10;
}

button.ribbon:before {
  border-color: #53dab6 #53dab6 #53dab6 transparent;
  left: -25px;
  border-width: 17px;
}

button.ribbon:after {
  border-color: #53dab6 transparent #53dab6 #53dab6;
  right: -25px;
  border-width: 17px;
}

button:before, button:after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 0;
  outline: none;
}

button.btn:before {
  border-color: #757575 #757575 #757575 transparent;
}

button.btn:after {
  border-color: #757575 transparent #757575 #757575;
}

button.btn-primary:before {
  border-color: #2e6da4 #2e6da4 #2e6da4 transparent;
}

button.btn-primary:after {
  border-color: #2e6da4 transparent #2e6da4 #2e6da4;
}

button.btn-warning:before {
  border-color: #d58512 #d58512 #d58512 transparent;
}

button.btn-warning:after {
  border-color: #d58512 transparent #d58512 #d58512;
}

button.btn-danger:before {
  border-color: #ac2925 #ac2925 #ac2925 transparent;
}

button.btn-danger:after {
  border-color: #ac2925 transparent #ac2925 #ac2925;
}

button.btn-light:before {
  border-color: #757575 #757575 #757575 transparent;
}

button.btn-light:after {
  border-color: #757575 transparent #757575 #757575;
}