Bootstrap 4 Labels on buttons (Scss implementation)

[GeoSot]

Hello as i didn't knew if i could use the package over bootstrap 4, I have done an approach to replicate labels inside buttons for my projects.

So you can test it and use it if you like

SCSS CODE

// Labels for buttons
// --------------------------------------------------

@mixin labelBtn-size($direction,$padding-y ,$padding-x ) {

  $radius:0;
  @if $enable-rounded {
     $radius:$btn-border-radius;
  }
  padding: calc(#{$padding-y} + #{$btn-border-width * 2}) calc(#{$padding-x} + #{$btn-border-width});
  margin-top: calc(-#{$padding-y} - #{$btn-border-width});
  margin-bottom: calc(-#{$padding-y} - #{$btn-border-width});

  @if $direction == 'left' {
    border-radius: $radius 0 0 $radius;
    margin-left: calc(-#{$padding-x} - #{$btn-border-width});
    margin-right: $padding-x;
  }
  @else {
    border-radius: 0 $radius $radius 0;
    margin-right: calc(-#{$padding-x} - #{$btn-border-width});
    margin-left: $padding-x;
  }

}

.btn {
  .btn-label {
    position: relative;
    background: transparent;
    display: inline-block;
    background: rgba(0, 0, 0, 0.15);
    @include labelBtn-size('left', $btn-padding-y, $btn-padding-x);
    &.btn-label-right{
      @include labelBtn-size('right', $btn-padding-y, $btn-padding-x);
    }

  }
  &.btn-lg  .btn-label{
    @include labelBtn-size('left', $btn-padding-y-lg, $btn-padding-x-lg);
    &.btn-label-right{
      @include labelBtn-size('right', $btn-padding-y-lg, $btn-padding-x-lg);
    }

  }

  &.btn-sm  .btn-label{
    @include labelBtn-size('left', $btn-padding-y-sm, $btn-padding-x-sm);
    &.btn-label-right{
      @include labelBtn-size('right', $btn-padding-y-sm, $btn-padding-x-sm);
    }
  }

}

Usage

<button class="btn  btn-default " type="button" >
        <span class="btn-label"><i class="fa fa-check-circle-o"></i></span>
        <span class="btn_text">text</span>
</button>
<button class="btn  btn-default " type="button" >
        <span class="btn-label btn-label-right"><i class="fa fa-check-circle-o"></i></span>
        <span class="btn_text">text</span>
</button>

[Minstel]

@GeoSot Support for BS4 (including button labels) will be added in next major release.