Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

Sass Button Mixin

Avatar of asp_net2
asp_net2Flag for United States of America asked on
Web Languages and StandardsWeb DevelopmentCSSHTMLWeb Frameworks
5 Comments1 Solution386 ViewsLast Modified:
I have the following placeholder for all buttons along with multiple button mixins for different types of styling. I would love to know if I would somehow be able to just have one mixin for all of my different styles. Please see my code below.

Mixins:

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

// Background Colors from Color Palette

 @mixin bg-colors($map) {
   @each $theme, $color in $map {
     &--#{$theme} {
      background-color: palette($theme);
     }
   }
 }

@mixin btn-flat-rounded($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      background-color: palette($theme);
      @include border-radius(3px);
      &:hover {
      background-color: palette($theme, light);
     }
    }
  }
}

@mixin btn-flat-pill($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      background-color: palette($theme);
      @include border-radius(50px);
      &:hover {
      background-color: palette($theme, light);
     }
    }
  }
}

@mixin btn-flat-square($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      background-color: palette($theme);
      &:hover {
      background-color: palette($theme, light);
     }
    }
  }
}

@mixin btn-flat-circle($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      width: 120px;
      height: 120px;
      padding: 0;
      line-height: 120px;
      background-color: palette($theme);
      @include border-radius(240px);
      &:hover {
      background-color: palette($theme, light);
     }
    }
  }
}





@mixin btn-ghost-rounded($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      @include border-radius(3px);
      background-color: transparent;
      color: palette($theme);
      border: 1px solid palette($theme);
      &:hover {
      color: palette($theme, mid-light);
      border: 1px solid palette($theme, mid-light);
     }
    }
  }
}

@mixin btn-ghost-pill($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      @include border-radius(50px);
      background-color: transparent;
      color: palette($theme);
      border: 1px solid palette($theme);
      &:hover {
      color: palette($theme, mid-light);
      border: 1px solid palette($theme, mid-light);
     }
    }
  }
}

@mixin btn-ghost-square($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      background-color: transparent;
      color: palette($theme);
      border: 1px solid palette($theme);
      &:hover {
      color: palette($theme, mid-light);
      border: 1px solid palette($theme, mid-light);
     }
    }
  }
}

@mixin btn-ghost-circle($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %btn;
      @include border-radius(240px);
      width: 120px;
      height: 120px;
      padding: 0;
      line-height: 120px;
      background-color: transparent;
      color: palette($theme);
      border: 1px solid palette($theme);
      &:hover {
      color: palette($theme, mid-light);
      border: 1px solid palette($theme, mid-light);
     }
    }
  }
}

Placeholders(Extends):

// Button Styles for all buttons

%btn {
  display: inline-block;
  color: $color-white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  outline: none;
}

Color Variables:

// Color Names

$color-white   : #fff;
$color-red     : #d42c2c;
$color-orange  : #ff7700;
$color-green   : #33cc33;
$color-blue    : #007fff;
$color-purple  : #9933ff;
$color-black   : #000;

// Color Palette Modifiers

$color-palettes: (
    white: (
        base       : $color-white,
        dark       : darken($color-white, 10%),
        mid-dark   : darken($color-white, 20%),
        x-dark     : darken($color-white, 30%)
    ),
    red: (
        base       : $color-red,
        light      : lighten($color-red, 10%),
        mid-light  : lighten($color-red, 20%),
        x-light    : lighten($color-red, 30%),
        dark       : darken($color-red, 10%),
        mid-dark   : darken($color-red, 20%),
        x-dark     : darken($color-red, 30%)
    ),
    orange: (
        base       : $color-orange,
        light      : lighten($color-orange, 10%),
        mid-light  : lighten($color-orange, 20%),
        x-light    : lighten($color-orange, 30%),
        dark       : darken($color-orange, 10%),
        mid-dark   : darken($color-orange, 20%),
        x-dark     : darken($color-orange, 30%)
    ),
    green: (
        base       : $color-green,
        light      : lighten($color-green, 10%),
        mid-light  : lighten($color-green, 20%),
        x-light    : lighten($color-green, 30%),
        dark       : darken($color-green, 10%),
        mid-dark   : darken($color-green, 20%),
        x-dark     : darken($color-green, 30%)
    ),
    blue: (
        base       : $color-blue,
        light      : lighten($color-blue, 10%),
        mid-light  : lighten($color-blue, 20%),
        x-light    : lighten($color-blue, 30%),
        dark       : darken($color-blue, 10%),
        mid-dark   : darken($color-blue, 20%),
        x-dark     : darken($color-blue, 30%)
    ),
    purple: (
        base       : $color-purple,
        light      : lighten($color-purple, 10%),
        mid-light  : lighten($color-purple, 20%),
        x-light    : lighten($color-purple, 30%),
        dark       : darken($color-purple, 10%),
        mid-dark   : darken($color-purple, 20%),
        x-dark     : darken($color-purple, 30%)
    ),
    black: (
        base       : $color-black,
        light      : lighten($color-black, 10%),
        mid-light  : lighten($color-black, 20%),
        x-light    : lighten($color-black, 30%)
    )
);

Button Module:

/* Rounded */
.btn-flat-rounded {
	@include btn-flat-rounded($color-palettes);
}

/* Pill */
.btn-flat-pill {
	@include btn-flat-pill($color-palettes);
}

/* Square */
.btn-flat-square {
	@include btn-flat-square($color-palettes);
}

/* Circle */
.btn-flat-circle {
	@include btn-flat-circle($color-palettes);
}

/****************************************************************************
 Ghost Buttons
****************************************************************************/

/* Rounded */
.btn-ghost-rounded {
	@include btn-ghost-rounded($color-palettes);
}

/* Pill */
.btn-ghost-pill {
	@include btn-ghost-pill($color-palettes);
}

/* Square */
.btn-ghost-square {
	@include btn-ghost-square($color-palettes);
}

/* Circle */
.btn-ghost-circle {
	@include btn-ghost-circle($color-palettes);
}

CSS Output:

.btn-flat-rounded--white, .btn-flat-rounded--red, .btn-flat-rounded--orange, .btn-flat-rounded--green, .btn-flat-rounded--blue, .btn-flat-rounded--purple, .btn-flat-rounded--black, .btn-flat-pill--white, .btn-flat-pill--red, .btn-flat-pill--orange, .btn-flat-pill--green, .btn-flat-pill--blue, .btn-flat-pill--purple, .btn-flat-pill--black, .btn-flat-square--white, .btn-flat-square--red, .btn-flat-square--orange, .btn-flat-square--green, .btn-flat-square--blue, .btn-flat-square--purple, .btn-flat-square--black, .btn-flat-circle--white, .btn-flat-circle--red, .btn-flat-circle--orange, .btn-flat-circle--green, .btn-flat-circle--blue, .btn-flat-circle--purple, .btn-flat-circle--black, .btn-ghost-rounded--white, .btn-ghost-rounded--red, .btn-ghost-rounded--orange, .btn-ghost-rounded--green, .btn-ghost-rounded--blue, .btn-ghost-rounded--purple, .btn-ghost-rounded--black, .btn-ghost-pill--white, .btn-ghost-pill--red, .btn-ghost-pill--orange, .btn-ghost-pill--green, .btn-ghost-pill--blue, .btn-ghost-pill--purple, .btn-ghost-pill--black, .btn-ghost-square--white, .btn-ghost-square--red, .btn-ghost-square--orange, .btn-ghost-square--green, .btn-ghost-square--blue, .btn-ghost-square--purple, .btn-ghost-square--black, .btn-ghost-circle--white, .btn-ghost-circle--red, .btn-ghost-circle--orange, .btn-ghost-circle--green, .btn-ghost-circle--blue, .btn-ghost-circle--purple, .btn-ghost-circle--black {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  outline: none; }

/****************************************************************************
 Modules 
****************************************************************************/
/****************************************************************************
 Flat Buttons
****************************************************************************/
/* Rounded */
.btn-flat-rounded--white {
  background-color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
.btn-flat-rounded--red {
  background-color: #d42c2c;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--red:hover {
    background-color: #dd5656; }
.btn-flat-rounded--orange {
  background-color: #ff7700;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--orange:hover {
    background-color: #ff9233; }
.btn-flat-rounded--green {
  background-color: #33cc33;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--green:hover {
    background-color: #5cd65c; }
.btn-flat-rounded--blue {
  background-color: #007fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--blue:hover {
    background-color: #3399ff; }
.btn-flat-rounded--purple {
  background-color: #9933ff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--purple:hover {
    background-color: #b266ff; }
.btn-flat-rounded--black {
  background-color: #000;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px; }
  .btn-flat-rounded--black:hover {
    background-color: #1a1a1a; }

/* Pill */
.btn-flat-pill--white {
  background-color: #fff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
.btn-flat-pill--red {
  background-color: #d42c2c;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--red:hover {
    background-color: #dd5656; }
.btn-flat-pill--orange {
  background-color: #ff7700;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--orange:hover {
    background-color: #ff9233; }
.btn-flat-pill--green {
  background-color: #33cc33;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--green:hover {
    background-color: #5cd65c; }
.btn-flat-pill--blue {
  background-color: #007fff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--blue:hover {
    background-color: #3399ff; }
.btn-flat-pill--purple {
  background-color: #9933ff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--purple:hover {
    background-color: #b266ff; }
.btn-flat-pill--black {
  background-color: #000;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px; }
  .btn-flat-pill--black:hover {
    background-color: #1a1a1a; }

/* Square */
.btn-flat-square--white {
  background-color: #fff; }
.btn-flat-square--red {
  background-color: #d42c2c; }
  .btn-flat-square--red:hover {
    background-color: #dd5656; }
.btn-flat-square--orange {
  background-color: #ff7700; }
  .btn-flat-square--orange:hover {
    background-color: #ff9233; }
.btn-flat-square--green {
  background-color: #33cc33; }
  .btn-flat-square--green:hover {
    background-color: #5cd65c; }
.btn-flat-square--blue {
  background-color: #007fff; }
  .btn-flat-square--blue:hover {
    background-color: #3399ff; }
.btn-flat-square--purple {
  background-color: #9933ff; }
  .btn-flat-square--purple:hover {
    background-color: #b266ff; }
.btn-flat-square--black {
  background-color: #000; }
  .btn-flat-square--black:hover {
    background-color: #1a1a1a; }

/* Circle */
.btn-flat-circle--white {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #fff;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
.btn-flat-circle--red {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #d42c2c;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
  .btn-flat-circle--red:hover {
    background-color: #dd5656; }
.btn-flat-circle--orange {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #ff7700;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
  .btn-flat-circle--orange:hover {
    background-color: #ff9233; }
.btn-flat-circle--green {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #33cc33;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
  .btn-flat-circle--green:hover {
    background-color: #5cd65c; }
.btn-flat-circle--blue {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #007fff;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
  .btn-flat-circle--blue:hover {
    background-color: #3399ff; }
.btn-flat-circle--purple {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #9933ff;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
  .btn-flat-circle--purple:hover {
    background-color: #b266ff; }
.btn-flat-circle--black {
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: #000;
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px; }
  .btn-flat-circle--black:hover {
    background-color: #1a1a1a; }

/****************************************************************************
 Ghost Buttons
****************************************************************************/
/* Rounded */
.btn-ghost-rounded--white {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff; }
  .btn-ghost-rounded--white:hover {
    border: 1px solid; }
.btn-ghost-rounded--red {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #d42c2c;
  border: 1px solid #d42c2c; }
  .btn-ghost-rounded--red:hover {
    color: #e58181;
    border: 1px solid #e58181; }
.btn-ghost-rounded--orange {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #ff7700;
  border: 1px solid #ff7700; }
  .btn-ghost-rounded--orange:hover {
    color: #ffad66;
    border: 1px solid #ffad66; }
.btn-ghost-rounded--green {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #33cc33;
  border: 1px solid #33cc33; }
  .btn-ghost-rounded--green:hover {
    color: #85e085;
    border: 1px solid #85e085; }
.btn-ghost-rounded--blue {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #007fff;
  border: 1px solid #007fff; }
  .btn-ghost-rounded--blue:hover {
    color: #66b2ff;
    border: 1px solid #66b2ff; }
.btn-ghost-rounded--purple {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #9933ff;
  border: 1px solid #9933ff; }
  .btn-ghost-rounded--purple:hover {
    color: #cc99ff;
    border: 1px solid #cc99ff; }
.btn-ghost-rounded--black {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background-color: transparent;
  color: #000;
  border: 1px solid #000; }
  .btn-ghost-rounded--black:hover {
    color: #333333;
    border: 1px solid #333333; }

/* Pill */
.btn-ghost-pill--white {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff; }
  .btn-ghost-pill--white:hover {
    border: 1px solid; }
.btn-ghost-pill--red {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #d42c2c;
  border: 1px solid #d42c2c; }
  .btn-ghost-pill--red:hover {
    color: #e58181;
    border: 1px solid #e58181; }
.btn-ghost-pill--orange {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #ff7700;
  border: 1px solid #ff7700; }
  .btn-ghost-pill--orange:hover {
    color: #ffad66;
    border: 1px solid #ffad66; }
.btn-ghost-pill--green {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #33cc33;
  border: 1px solid #33cc33; }
  .btn-ghost-pill--green:hover {
    color: #85e085;
    border: 1px solid #85e085; }
.btn-ghost-pill--blue {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #007fff;
  border: 1px solid #007fff; }
  .btn-ghost-pill--blue:hover {
    color: #66b2ff;
    border: 1px solid #66b2ff; }
.btn-ghost-pill--purple {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #9933ff;
  border: 1px solid #9933ff; }
  .btn-ghost-pill--purple:hover {
    color: #cc99ff;
    border: 1px solid #cc99ff; }
.btn-ghost-pill--black {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background-color: transparent;
  color: #000;
  border: 1px solid #000; }
  .btn-ghost-pill--black:hover {
    color: #333333;
    border: 1px solid #333333; }

/* Square */
.btn-ghost-square--white {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff; }
  .btn-ghost-square--white:hover {
    border: 1px solid; }
.btn-ghost-square--red {
  background-color: transparent;
  color: #d42c2c;
  border: 1px solid #d42c2c; }
  .btn-ghost-square--red:hover {
    color: #e58181;
    border: 1px solid #e58181; }
.btn-ghost-square--orange {
  background-color: transparent;
  color: #ff7700;
  border: 1px solid #ff7700; }
  .btn-ghost-square--orange:hover {
    color: #ffad66;
    border: 1px solid #ffad66; }
.btn-ghost-square--green {
  background-color: transparent;
  color: #33cc33;
  border: 1px solid #33cc33; }
  .btn-ghost-square--green:hover {
    color: #85e085;
    border: 1px solid #85e085; }
.btn-ghost-square--blue {
  background-color: transparent;
  color: #007fff;
  border: 1px solid #007fff; }
  .btn-ghost-square--blue:hover {
    color: #66b2ff;
    border: 1px solid #66b2ff; }
.btn-ghost-square--purple {
  background-color: transparent;
  color: #9933ff;
  border: 1px solid #9933ff; }
  .btn-ghost-square--purple:hover {
    color: #cc99ff;
    border: 1px solid #cc99ff; }
.btn-ghost-square--black {
  background-color: transparent;
  color: #000;
  border: 1px solid #000; }
  .btn-ghost-square--black:hover {
    color: #333333;
    border: 1px solid #333333; }

/* Circle */
.btn-ghost-circle--white {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff; }
  .btn-ghost-circle--white:hover {
    border: 1px solid; }
.btn-ghost-circle--red {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #d42c2c;
  border: 1px solid #d42c2c; }
  .btn-ghost-circle--red:hover {
    color: #e58181;
    border: 1px solid #e58181; }
.btn-ghost-circle--orange {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #ff7700;
  border: 1px solid #ff7700; }
  .btn-ghost-circle--orange:hover {
    color: #ffad66;
    border: 1px solid #ffad66; }
.btn-ghost-circle--green {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #33cc33;
  border: 1px solid #33cc33; }
  .btn-ghost-circle--green:hover {
    color: #85e085;
    border: 1px solid #85e085; }
.btn-ghost-circle--blue {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #007fff;
  border: 1px solid #007fff; }
  .btn-ghost-circle--blue:hover {
    color: #66b2ff;
    border: 1px solid #66b2ff; }
.btn-ghost-circle--purple {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #9933ff;
  border: 1px solid #9933ff; }
  .btn-ghost-circle--purple:hover {
    color: #cc99ff;
    border: 1px solid #cc99ff; }
.btn-ghost-circle--black {
  -webkit-border-radius: 240px;
  -moz-border-radius: 240px;
  -ms-border-radius: 240px;
  border-radius: 240px;
  width: 120px;
  height: 120px;
  padding: 0;
  line-height: 120px;
  background-color: transparent;
  color: #000;
  border: 1px solid #000; }
  .btn-ghost-circle--black:hover {
    color: #333333;
    border: 1px solid #333333; }
ASKER CERTIFIED SOLUTION
Avatar of Alexandre Simões
Alexandre SimõesFlag of Switzerland imageSoftware Architect

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Commented:
This problem has been solved!
Unlock 1 Answer and 5 Comments.
See Answers
Plans and Pricing
Resources
Features
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2021 Experts Exchange, LLC. All rights reserved. Covered by US Patent