@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);
}
}
}
}
// 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 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%)
)
);
/* 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);
}
.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; }
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.