<h3>SCSS button gallery</h3>
<div class="wrap">
<button class="flat-btn">Button</button>
<button class="flat-btn blue">Blue button</button>
<button class="flat-btn green">Green button</button>
<button class="flat-btn red">Red button</button>
<br><br>
<button class="pebble-btn">button</button>
<button class="pebble-btn blue">blue button</button>
<button class="pebble-btn green">green button</button>
<button class="pebble-btn red">red button</button>
<br><br>
<button class="topshadow-btn">button</button>
<button class="topshadow-btn blue">blue button</button>
<button class="topshadow-btn green">green button</button>
<button class="topshadow-btn red">red button</button>
<br><br>
<button class="lineshadow-btn">Button</button>
<button class="lineshadow-btn blue">Blue button</button>
<button class="lineshadow-btn green">Green button</button>
<button class="lineshadow-btn red">Red button</button>
<br><br>
<button class="clear-btn">Button</button>
<button class="clear-btn blue">Blue button</button>
<button class="clear-btn green">Green button</button>
<button class="clear-btn red">Red button</button>
<br><br>
<button class="gradient-btn">Button</button>
<button class="gradient-btn blue">Blue button</button>
<button class="gradient-btn green">Green button</button>
<button class="gradient-btn red">Red button</button>
<br><br>
<button class="round-btn">Button</button>
<button class="round-btn blue">Blue button</button>
<button class="round-btn green">Green button</button>
<button class="round-btn red">Red button</button>
<br><br>
<button class="sharp-btn">Button</button>
<button class="sharp-btn blue">Blue button</button>
<button class="sharp-btn green">Green button</button>
<button class="sharp-btn red">Red button</button>
<br><br>
<button class="shrink-btn">Button</button>
<button class="shrink-btn blue">Blue button</button>
<button class="shrink-btn green">Green button</button>
<button class="shrink-btn red">Red button</button>
<br><br>
<button class="glitch-btn">Button</button>
<button class="glitch-btn blue">Blue button</button>
<button class="glitch-btn green">Green button</button>
<button class="glitch-btn red">Red button</button>
<br><br>
<button class="lefttop-btn">button</button>
<button class="lefttop-btn blue">blue button</button>
<button class="lefttop-btn green">green button</button>
<button class="lefttop-btn red">red button</button>
<br><br>
<button class="picross-btn">Button</button>
<button class="picross-btn blue">Blue button</button>
<button class="picross-btn green">Green button</button>
<button class="picross-btn red">Red button</button>
<br><br>
<button class="classic-btn">Button</button>
<button class="classic-btn blue">Blue button</button>
<button class="classic-btn green">Green button</button>
<button class="classic-btn red">Red button</button>
<br><br>
<button class="simple-btn">Button</button>
<button class="simple-btn blue">Blue button</button>
<button class="simple-btn green">Green button</button>
<button class="simple-btn red">Red button</button>
<br><br>
<button class="threed-btn">Button</button>
<button class="threed-btn blue">Blue button</button>
<button class="threed-btn green">Green button</button>
<button class="threed-btn red">Red button</button>
<br><br>
</div>
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700|Oswald);
// vars
$gray: #777;
$blue: #07d;
$green: #0b6;
$red: #b21;
$font-stack: 'Lato', sans-serif;
$background: #f4f4f4; // url(https://subtlepatterns.com/patterns/square_bg.png);
button {
cursor: pointer;
border: none;
outline: none;
}
// 1: flat
@mixin flat-btn($color, $bottom-darken, $hover-lighten) {
background: $color;
@include box-shadow(0 4px 0 darken($color, $bottom-darken));
&:hover {
background: lighten($color, $hover-lighten);
}
}
.flat-btn {
padding: 10px 22px;
font: 300 1.2em $font-stack;
color: #fff;
text-shadow: 0 1px 1px rgba(#fff, .2);
@include border-radius(6px);
@include flat-btn($gray, 14%, 5.6%);
&.blue { @include flat-btn($blue, 13%, 5%); }
&.green { @include flat-btn($green, 10%, 4%); }
&.red { @include flat-btn($red, 12%, 5.2%); }
&:active {
@include box-shadow(none);
@include transform(translateY(4px));
}
}
// 2: pebble
$pebble-shadow-size: 6px;
@mixin pebble-btn($size, $color, $click-lighten) {
background: $color;
@include box-shadow(0 $size 0 0 rgba($color, .5),
0 (-$size) 0 0 rgba($color, .5),
$size 0 0 0 rgba($color, .5),
(-$size) 0 0 0 rgba($color, .5));
&:hover {
@include box-shadow(0 0 0 0 $color);
}
&:active {
background: lighten($color, $click-lighten);
@include box-shadow(inset 0 0 8px rgba($color, .4));
}
}
.pebble-btn {
padding: 10px 18px;
margin: $pebble-shadow-size;
position: relative;
font: 700 1.2em $font-stack;
color: #fff;
@include transition(box-shadow .3s linear, background-color .16s linear);
@include pebble-btn($pebble-shadow-size, $gray, 12%);
&.blue { @include pebble-btn($pebble-shadow-size, $blue, 12%); }
&.green { @include pebble-btn($pebble-shadow-size, $green, 6%); }
&.red { @include pebble-btn($pebble-shadow-size, $red, 12%); }
}
// 3: topshadow
@mixin topshadow-btn($color, $darken, $border-darken) {
background: darken($color, $darken);
border: 1px solid darken($color, $border-darken);
}
.topshadow-btn {
padding: 12px 20px;
font: 400 1em $font-stack;
text-transform: uppercase;
color: #fff;
@include border-radius(4px);
@include transition(.3s ease-out);
@include box-shadow(inset 0 1px 0 rgba(#fff, .3),
inset 0 2px 8px rgba(#222, .1));
&:hover {
@include box-shadow(inset 0 1px 0 rgba(#fff, .34),
inset 0 9px 13px rgba(#fff, .26));
}
&:active {
@include box-shadow(inset 0 1px 0 rgba(#fff, .3),
inset 0 3px 9px rgba(#fff, .1));
}
@include topshadow-btn($gray, 0%, 16%);
&.blue { @include topshadow-btn($blue, 4%, 16%); }
&.green { @include topshadow-btn($green, 3%, 16%); }
&.red { @include topshadow-btn($red, 0%, 12%); }
}
// 4: line shadow (in the right bottom)
@mixin lineshadow-btn($color, $darken, $lighten, $click-lighten) {
background: $color;
text-shadow: 2px 2px rgba(darken($color, 10), 0.6);
border-bottom: 4px solid darken($color, $darken);
@include box-shadow(0 0 0 2px $background, 2px 2px 0 2px lighten($color, $lighten));
&:hover {
@include box-shadow(0 0 0 2px $background, 0 0 0 4px darken($color, $darken));
}
&:active {
background: lighten($color, $click-lighten);
}
}
.lineshadow-btn {
padding: 10px 24px;
margin-right: 5px;
font: 700 1.2em $font-stack;
color: #fff;
@include border-radius(5px);
@include transition(box-shadow 0.2s, background 0.1s);
@include lineshadow-btn($gray, 10%, 15%, 3.1%);
&.blue { @include lineshadow-btn($blue, 9.5%, 17%, 3%); }
&.green { @include lineshadow-btn($green, 7%, 14%, 2%); }
&.red { @include lineshadow-btn($red, 9%, 18%, 3.8%); }
}
// 5: clear
@mixin clear-btn($color, $darken, $click-darken) {
color: darken($color, $darken);
border: 2px solid darken($color, $darken);
&:hover {
color: #fff;
background: darken($color, $darken);
}
&:active {
background: darken($color, $click-darken);
border: 2px solid darken($color, $click-darken);
}
}
.clear-btn {
padding: 11px 26px;
font: 400 1.1em $font-stack;
background: transparent;
@include transition(.38s);
@include clear-btn($gray, 0%, 8%);
&.blue { @include clear-btn($blue, 2%, 8%); }
&.green { @include clear-btn($green, 3%, 8%); }
&.red { @include clear-btn($red, 0%, 6%); }
}
// 6: gradient
@mixin gradient-btn($color, $lighten, $shadow-darken, $hover-darken) {
background: $color;
@include background(linear-gradient(lighten($color, $lighten), $color));
@include box-shadow(0 2px 0 darken($color, $shadow-darken));
&:hover {
background: darken($color, $hover-darken);
@include background(
linear-gradient(darken(lighten($color, $lighten), $hover-darken),
darken($color, $hover-darken)));
}
&:active {
@include background(
linear-gradient(darken($color, $hover-darken),
darken(lighten($color, $lighten), $hover-darken)));
}
}
.gradient-btn {
padding: 14px 32px;
font: 400 1em $font-stack;
color: #fff;
text-shadow: 0 1px 2px rgba(#000, .6);
@include border-radius(3px);
@include gradient-btn(lighten($gray, 2%), 13%, 13.3%, 6%);
&.blue { @include gradient-btn($blue, 13%, 12%, 5%); }
&.green { @include gradient-btn($green, 10%, 10%, 4%); }
&.red { @include gradient-btn(lighten($red, 2%), 14%, 13.8%, 5%); }
}
// 7: round
@mixin round-btn($color, $darken) {
background-color: $color;
@include background(
linear-gradient($color 42%, darken($color, $darken) 58%));
}
.round-btn {
padding: 15px 27px;
font: 700 .9em $font-stack;
text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 2px rgba(#000, .3);
@include border-radius(32px);
@include transition(.16s);
@include round-btn($gray, 9%);
&.blue { @include round-btn($blue, 9%); }
&.green { @include round-btn($green, 8%); }
&.red { @include round-btn(lighten($red, 4%), 8.8%); }
&:hover {
@include box-shadow(inset 0 0 14px rgba(#000, .33));
}
&:active {
@include box-shadow(inset 0 0 9px rgba(#000, .1));
}
}
// 8: sharp
@mixin sharp-btn($color) {
background: $color;
border-color: darken($color, 5) darken($color, 15)
darken($color, 15) darken($color, 5);
@include background(
linear-gradient($color 50%, darken($color, 7) 50%));
&:hover {
@include background(
linear-gradient(darken($color, 3) 50%, darken($color, 10) 50%));
}
}
.sharp-btn {
padding: 12px 22px;
font: 400 1.1em $font-stack;
color: #fff;
text-shadow: 0 -1px 1px rgba(#000, .6);
border-style: solid;
border-width: 2px;
@include box-shadow(inset 4px 4px 6px -4px rgba(#fff, .4));
@include sharp-btn($gray);
&.blue { @include sharp-btn($blue); }
&.green { @include sharp-btn($green); }
&.red { @include sharp-btn(lighten($red, 6%)); }
&:active {
@include box-shadow(4px 4px 6px -4px rgba(#000, .3),
inset -4px -4px 6px -4px rgba(#fff, .2));
}
}
// 9: shrink
$shrink-size: 4px;
@mixin shrink-btn($color, $lighten, $darken-shadow) {
background: lighten($color, $lighten);
&:hover {
@include box-shadow(0 0 0 $shrink-size
darken($color, $darken-shadow));
}
}
.shrink-btn {
padding: 12px 21px;
font: 300 1em $font-stack;
text-transform: uppercase;
color: #fff;
margin: $shrink-size;
@include transition(.3s);
@include shrink-btn($gray, 6%, 2%);
&.blue { @include shrink-btn($blue, 5%, 1%); }
&.green { @include shrink-btn($green, 3%, 3%); }
&.red { @include shrink-btn($red, 8%, 2%); }
&:active {
@include transform(scale(.94));
}
}
// 10. glitch
@mixin glitch-btn($color, $darken) {
$color: darken($color, $darken);
background: $color;
@include box-shadow(0 4px 0 -2px rgba($color, .3),
0 10px 0 -6px rgba($color, .3),
0 12px 0 -10px rgba($color, .3),
0 -4px 0 -2px rgba($color, .3),
0 -10px 0 -6px rgba($color, .3),
0 -12px 0 -10px rgba($color, .3));
&:hover {
box-shadow: 0 10px 0 -6px rgba($color, .3),
0 12px 0 -10px rgba($color, .3),
0 4px 0 -2px rgba($color, .3),
0 -10px 0 -6px rgba($color, .3),
0 -12px 0 -10px rgba($color, .3),
0 -4px 0 -2px rgba($color, .3);
}
&:active {
box-shadow: 4px 0 0 -2px rgba($color, .3),
10px 0 0 -6px rgba($color, .3),
-16px 0 0 -10px rgba($color, .3),
-4px 0 0 -2px rgba($color, .3),
-10px 0 0 -6px rgba($color, .3),
16px 0 0 -10px rgba($color, .3);
}
}
.glitch-btn {
padding: 10px 25px;
margin: 4px 6px;
font: 400 1.1em $font-stack;
letter-spacing: .3px;
color: #fff;
@include transition(.2s);
@include glitch-btn($gray, 4%);
&.blue { @include glitch-btn($blue, 2%); }
&.green { @include glitch-btn($green, 5%); }
&.red { @include glitch-btn(lighten($red, 3%), 2%); }
}
// 11: lefttop
@mixin lefttop-btn($color, $lighten, $darken) {
background: $color;
@include background(linear-gradient(left top,
darken($color, $darken) -14%, lighten($color, $lighten), $color 114%));
}
.lefttop-btn {
padding: 12px 27px;
font: 300 1.1em $font-stack;
letter-spacing: .3px;
color: #fff;
text-shadow: -1px -1px 3px rgba(#000, .7);
@include border-radius(2px);
@include transition(.2s);
@include box-shadow(inset 0 0 9px rgba(#000, .3));
@include lefttop-btn($gray, 16%, 3%);
&.blue { @include lefttop-btn($blue, 18%, 3%); }
&.green { @include lefttop-btn($green, 9%, 5%); }
&.red { @include lefttop-btn(lighten($red, 2%), 21%, 2%); }
&:hover {
@include box-shadow(none);
}
&:active {
@include box-shadow(inset 0 0 6px rgba(#000, .16),
0 0 3px rgba(#000, .5));
}
}
// 12: picross
$picross-shadow: 4px;
@mixin picross-btn($color, $lighten, $darken) {
background: darken(lighten($color, $lighten), $darken);
}
.picross-btn {
padding: 12px 25px;
font: 400 1.1em $font-stack;
color: #fff;
margin: 0 $picross-shadow $picross-shadow 0;
@include box-shadow($picross-shadow $picross-shadow 0 #555);
@include transition(.3s);
@include picross-btn($gray, 6%, 0%);
&.blue { @include picross-btn($blue, 5%, 0%); }
&.green { @include picross-btn($green, 3%, 0%); }
&.red { @include picross-btn($red, 8%, 0%); }
&:hover {
@include transform(translate($picross-shadow, $picross-shadow));
@include box-shadow(0 0 0 #555);
}
&:active {
@include box-shadow(inset 0 0 6px rgba(#000, .4));
}
}
// 13: classic
@mixin classic-btn($color, $lighten, $border-darken) {
background: $color;
border-color: darken($color, $border-darken);
@include background(
linear-gradient(lighten($color, $lighten), $color));
&:hover {
@include background(
linear-gradient(lighten($color, $lighten - 3%), darken($color, 4%)));
border-color: darken($color, $border-darken + 12%);
}
&:active {
@include background(
linear-gradient(darken($color, 5%) -40%, darken($color, 2%)));
}
}
.classic-btn {
padding: 10px 24px;
font: 400 1.1em $font-stack;
color: #fff;
text-shadow: 0 -1px 1px rgba(#000, .6);
border-style: solid;
border-width: 1px;
@include border-radius(7px);
@include classic-btn($gray, 18%, 10%);
&.blue { @include classic-btn($blue, 18%, 10%); }
&.green { @include classic-btn($green, 10%, 7%); }
&.red { @include classic-btn($red, 17%, 11%); }
}
// 14: simple
@mixin simple-btn($color, $darken, $border-darken, $click-lighten) {
background: darken($color, $darken);
border: 1px solid darken($color, $border-darken);
&:active {
background: lighten(darken($color, $darken), $click-lighten);
}
}
.simple-btn {
padding: 12px 26px;
font: 400 1em $font-stack;
letter-spacing: .5px;
color: #fff;
@include box-shadow(inset 0 0 9px rgba(#fff, .3),
1px 1px 3px rgba(#000, .66));
@include simple-btn($gray, 5%, 11%, 5%);
&.blue { @include simple-btn($blue, 3%, 10%, 5.2%); }
&.green { @include simple-btn($green, 5%, 10%, 4%); }
&.red { @include simple-btn($red, 1%, 10%, 7%); }
&:hover {
@include box-shadow(inset 0 0 9px rgba(#fff, .08),
1px 1px 2px rgba(#000, .6));
}
}
// 15: 3d
@mixin threed-btn($color, $lighten, $darken) {
@include background(
linear-gradient($color, darken($color, $darken)));
border: 2px solid darken($color, 12%);
@include box-shadow(
inset 0 3px 4px 1px rgba(#fff, 0.22),
inset 0 -3px 4px 1px rgba(#000, 0.06),
inset 0 1px 1px rgba($color, 0.6),
0 8px 16px 0 rgba(0, 0, 0, 0.3),
0 2px 4px 0 rgba(0, 0, 0, 0.3)
);
&:active {
@include box-shadow(
inset 0 4px 6px 0 rgba(#000, 0.36),
inset 0 -3px 4px 1px rgba(#fff, 0.1),
inset 0 1px 1px rgba($color, 0.6)
);
}
}
.threed-btn {
padding: 10px 18px;
font: 300 1.1em $font-stack;
letter-spacing: 1px;
color: #e4e4e4;
text-shadow: 0 0 2px rgba(#fff, 0.1);
@include border-radius(8px);
@include transition(.1s);
@include threed-btn($gray, 5%, 11%);
&.blue { @include threed-btn($blue, 3%, 10%); }
&.green { @include threed-btn($green, 5%, 10%); }
&.red { @include threed-btn($red, 1%, 10%); }
&:hover {
color: #fff;
text-shadow: 0 0 2px rgba(#fff, 0.4);
}
}
//not btns
////////
/////
//
body {
text-align: center;
background: $background;
padding-bottom: 42px;
}
h3 {
font-family: 'Oswald', sans-serif;
color: #333;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 11px;
}
@media screen and (max-width: 666px) {
.wrap {
width: 380px;
margin: 0 auto;
}
}
@media screen and (max-width: 380px) {
.wrap {
width: 100%;
}
button {
width: 88%;
margin: 8px auto !important;
}
}
.flat-btn { margin: 4px 7px 8px; }
.pebble-btn { margin: ($pebble-shadow-size + 5px) ($pebble-shadow-size + 6px); }
.topshadow-btn { margin: 6px 4px; }
.lineshadow-btn { margin: 4px 5px 6px 4px; }
.clear-btn { margin: 5px 4px; }
.gradient-btn { margin: 5px 5px 6px; }
.round-btn { margin: 6px 4px; }
.sharp-btn { margin: 5px 8px; }
.shrink-btn { margin: 5px $shrink-size; }
.lefttop-btn { margin: 6px 5px; }
.picross-btn { margin: 4px ($picross-shadow + 3px) ($picross-shadow + 4px) 4px; }
.classic-btn { margin: 5px 5px; }
.simple-btn { margin: 5px 5px; }
.threed-btn { margin: 5px 5px; }
View Compiled
// SCSS gallery/library of different buttons
//
// yeah, old compass, it sucks.
// easily customazible
// works well with both <a> and <button> elements
// click it
This Pen doesn't use any external CSS resources.