qdouze-wordpress-theme/scss/_buttons.scss

/*
 *  5 - Buttons ( _buttons.scss )
 *  
 *  This part of the (s)css handle the style of buttons-like and badges.
 *
*/

@mixin button-lighten($background-color, $text-color) {
  background-color: lighten($background-color, 10%); 
  color:$text-color;
}

@mixin button-color($background-color, $text-color) {
  background-color: $background-color;
  color: $text-color;
  &, &:not(.disabled):not(:disabled) {
    &:hover, &:active, &:focus {
      @include button-lighten($background-color, $text-color);
    }
  }
}

.btn {
	@include borders();
	@include border-radius();
	box-shadow: $large-shadow, $inset-shadow;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
	@include button-color($color-light, #111);
  
  &:hover {
  position:relative;
	box-shadow: $narrow-shadow, $inset-shadow;
  top:1px;
	@include borders();
	text-decoration: none;
  }
  
  &:active {
  position:relative;
	box-shadow: $inset-shadow-inverted;
  top:2px;
	@include borders();
	text-decoration: none;
  }
}

.btn {
  &-blue { @include button-color($color-blue, #FFF); }
  &-violet { @include button-color($color-violet, #FFF); }
  &-purple { @include button-color($color-purple, #FFF); }
  &-red { @include button-color($color-red, #FFF); }
  &-orange { @include button-color($color-orange, #FFF); }
  &-green { @include button-color($color-green, #FFF); }
  &-skyblue { @include button-color($color-skyblue, #FFF); }
  &-dark { @include button-color($color-dark, #FFF); }
  &-light { @include button-color($color-light, #111); }
  &-turquoise { @include button-color($color-turquoise, #FFF); }
  &-yellow { @include button-color($color-yellow, #FFF); }
  &-brown { @include button-color($color-brown, #FFF); }
  &-grey { @include button-color($color-grey, #FFF); }
  
  &-primary { @include button-color($color-primary, #FFF); }
  &-secondary { @include button-color($color-secondary, #FFF); }
  &-warning { @include button-color($color-warning, #FFF); }
  &-danger { @include button-color($color-danger, #FFF); }
  &-info { @include button-color($color-info, #FFF); }
  &-success { @include button-color($color-success, #FFF); }
}

.btn-group {
	box-shadow: $large-shadow;
}

.btn-group .btn {
	box-shadow: $inset-shadow;
	@include border-radius();
	&:not(:first-child) {
	  border-top-left-radius: 0;
	  border-bottom-left-radius: 0;
	}
	&:not(:last-child) {
	  border-top-right-radius: 0;
	  border-bottom-right-radius: 0;
	}
}

.btn-group .btn:hover {
  position:relative;
  top:1px;
	box-shadow: $inset-shadow;
}

.btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
.show > .btn.dropdown-toggle {
  position:relative;
	box-shadow: $inset-shadow-inverted!important;
  top:2px;
	@include borders();
}

.btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus, .btn-light:focus {
  position:relative;
	box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
  top:1px;
  outline: none;
}

/* 5.1 - Réseaux sociaux */

.share-buttons {
  margin:15px;
}

.reagir {
  text-align:right;
}

.btn {
  &-facebook {@include button-color(#3B5998, #FFF);}
  &-twitter {@include button-color(#55ACEE, #FFF);}
  &-googleplus {@include button-color(#d34836, #FFF);}
  &-diaspora {@include button-color(#313739, #FFF);}
  &-mastodon {@include button-color(#282c37, #FFF);}
}

/* 5.2 - Badges */

@mixin badge-color($background-color, $text-color) {
  background-color: $background-color;
  color: $text-color;
    &, &:not(.disabled):not(:disabled) {
    &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
      @include button-lighten($background-color, $text-color);
    }
  }
}

.badge {
  @include borders();
  @include border-radius();
  
  &-pill {
    border-radius: 10rem;
  }
}

.badge {
  &-blue { @include badge-color($color-blue, #FFF); }
  &-violet { @include badge-color($color-violet, #FFF); }
  &-purple { @include badge-color($color-purple, #FFF); }
  &-red { @include badge-color($color-red, #FFF); }
  &-orange { @include badge-color($color-orange, #FFF); }
  &-green { @include badge-color($color-green, #FFF); }
  &-skyblue { @include badge-color($color-skyblue, #FFF); }
  &-dark { @include badge-color($color-dark, #FFF); }
  &-light { @include badge-color($color-light, #111); }
  &-turquoise { @include badge-color($color-turquoise, #FFF); }
  &-yellow { @include badge-color($color-yellow, #FFF); }
  &-brown { @include badge-color($color-brown, #FFF); }
  &-grey { @include badge-color($color-grey, #FFF); }
  
  &-primary { @include badge-color($color-primary, #FFF); }
  &-secondary { @include badge-color($color-secondary, #FFF); }
  &-warning { @include badge-color($color-warning, #FFF); }
  &-danger { @include badge-color($color-danger, #FFF); }
  &-info { @include badge-color($color-info, #FFF); }
  &-success { @include badge-color($color-success, #FFF); }
}