Skip to content

Instantly share code, notes, and snippets.

@dplummer

dplummer/sinewave_button.css

Created April 18, 2014 22:29
Show Gist options
  • Save dplummer/11067086 to your computer and use it in GitHub Desktop.
Save dplummer/11067086 to your computer and use it in GitHub Desktop.
Download ZIP
Sinewave button CSS
Raw
sinewave_button.css
.sinewave-button {
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-origin: padding-box;
background-size: auto;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px;
box-sizing: border-box;
color: white;
cursor: auto;
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
height: 25px;
line-height: 15px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
text-decoration: none solid white;
text-shadow: rgba(0, 0, 0, 0.49804) 0px 1px 0px, rgba(0, 0, 0, 0.2) 0px 0px 2px;
background: #3b98b6;
background: -moz-linear-gradient(top, #3b98b6, #317e97);
background: -ms-linear-gradient(top, #3b98b6, #317e97);
background: -o-linear-gradient(top, #3b98b6, #317e97);
background: -webkit-linear-gradient(top, #3b98b6, #317e97);
background: linear-gradient(top, #3b98b6, #317e97); }
.sinewave-button span:before {
background: #378eaa;
background: -moz-linear-gradient(top, #81c1d6, #378eaa);
background: -ms-linear-gradient(top, #81c1d6, #378eaa);
background: -o-linear-gradient(top, #81c1d6, #378eaa);
background: -webkit-linear-gradient(top, #81c1d6, #378eaa);
background: linear-gradient(top, #81c1d6, #378eaa); }
.sinewave-button:hover {
background: #307b93;
background: -moz-linear-gradient(top, #307b93, #2a6b80);
background: -ms-linear-gradient(top, #307b93, #2a6b80);
background: -o-linear-gradient(top, #307b93, #2a6b80);
background: -webkit-linear-gradient(top, #307b93, #2a6b80);
background: linear-gradient(top, #307b93, #2a6b80);
color: white; }
.sinewave-button:active, .sinewave-button:focus {
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
color: white;
top: 1px; }
.sinewave-button:before {
background: #378eaa;
background: -moz-linear-gradient(-45deg, #378eaa, #81c1d6);
background: -ms-linear-gradient(-45deg, #378eaa, #81c1d6);
background: -o-linear-gradient(-45deg, #378eaa, #81c1d6);
background: -webkit-linear-gradient(-45deg, #378eaa, #81c1d6);
background: linear-gradient(-45deg, #378eaa, #81c1d6);
-moz-box-shadow: "1px -1px 1px rgba(0, 0, 0, 0.1)";
-ms-box-shadow: "1px -1px 1px rgba(0, 0, 0, 0.1)";
-o-box-shadow: "1px -1px 1px rgba(0, 0, 0, 0.1)";
-webkit-box-shadow: "1px -1px 1px rgba(0, 0, 0, 0.1)";
box-shadow: "1px -1px 1px rgba(0, 0, 0, 0.1)";
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
display: block;
height: 26px;
width: 26px;
position: absolute;
left: 2px;
top: 50%;
margin-top: -13px;
z-index: 0; }
.sinewave-button:after {
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: "inset 0 -1px 0 rgba(0, 0, 0, 0.3)";
-ms-box-shadow: "inset 0 -1px 0 rgba(0, 0, 0, 0.3)";
-o-box-shadow: "inset 0 -1px 0 rgba(0, 0, 0, 0.3)";
-webkit-box-shadow: "inset 0 -1px 0 rgba(0, 0, 0, 0.3)";
box-shadow: "inset 0 -1px 0 rgba(0, 0, 0, 0.3)";
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 10; }
.sinewave-button span {
display: inline-block;
padding: 5px 10px 5px 40px; }
.sinewave-button span:after {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAQCAMAAADDGrRQAAABmFBMVEUAAAA2MzMdFBo2ODkwJisxIRscDi01NDYwFgofFC0yLjAkHC/3maodEiwnIS/vOVUxHRT5t8T2hpz6qLj/7fP/9PdCRVE1PDH0XHzfXnkdES4xFAgpITIgFC8kGjExFAgpGB40IBgzGxE2JyHvQGQoufSf5EMqwf6Lw0EtreMsqd4hsOgjIiXqAClAUCv2KVIlT12X1UOZ20KQyESU0kAiPEj/QHT0UXQryv+Lxj38QmOFyzr/OntYmswrxP8kGRRNYjBUbjHrETg3Pi5WczAkXHUnWG4rOD7sET3tLVTsIUo+WzGW2ECm70UqLx7+K1juPGB7yDjZElYqvPgKMDSekEztRmX/QGfsRWrOEyo0Pidy9DIsu/cSruSZ2kP2QXKro1NVgq3kU3kwtO/tTG8rLyWc3kUAz/+NyEIsJycgHCbrXnh62jN62DLJh2uJqR2CuDk7X1AgLjStqlMBu/bdYYai5kYko9gjq+InpvAVpv8ax/+fySP/ToqjwTVVwZwklsbNgpZns5mYgq1v6Ly48CoKt/ATf8ED0x94AAAAJHRSTlMAEToFINTCFuC8Mbt25+HVsFeedjgVUFHsz7XyV51/8KmTv2KmDtV7AAAA4klEQVQY02OAAUF+HgY0IKzrpCuEKiSq76Xi6SGCEGBhEpf0VwlQ0ZcQY2IBizCyuhuERIZHqISZBfl5O/OxA8U4XFWDYxOTrFLizUMDjXxceBkYBNwsVDWT022tzG0Sok2MDX0dORlYDdRjtDS1tUvNsjOsLTUM1Ry4GZg5TNXVtTRLmm3ycow14tT0OEF2SJuqqmu12dYW52qkGemxgS1mly/StquobKyzVjOJAgpBBDl0yi2qmmrKLFOl4I5mVrJvqK5vLdCRRfabon17S36WHKqHlXUKM2XQA4ZLgQvGBADcACsC8ZI0XAAAAABJRU5ErkJggg==) 10px center no-repeat;
content: "";
display: block;
width: 31px;
position: absolute;
bottom: 0;
left: -3px;
top: 0;
z-index: 10; }
.sinewave-button span:before {
background: #378eaa;
background: -moz-linear-gradient(top, #81c1d6, #378eaa);
background: -ms-linear-gradient(top, #81c1d6, #378eaa);
background: -o-linear-gradient(top, #81c1d6, #378eaa);
background: -webkit-linear-gradient(top, #81c1d6, #378eaa);
background: linear-gradient(top, #81c1d6, #378eaa);
-moz-border-radius: "3px 0 0 3px";
-ms-border-radius: "3px 0 0 3px";
-o-border-radius: "3px 0 0 3px";
-webkit-border-radius: "3px 0 0 3px";
border-radius: "3px 0 0 3px";
content: "";
display: block;
height: 100%;
width: 20px;
position: absolute;
bottom: 0;
left: 0;
top: 0;
z-index: 1; }
Raw
sinewave_button.sass
@mixin background-gradient($base, $loc, $start, $end)
background: $base
background: -moz-linear-gradient($loc, $start, $end)
background: -ms-linear-gradient($loc, $start, $end)
background: -o-linear-gradient($loc, $start, $end)
background: -webkit-linear-gradient($loc, $start, $end)
background: linear-gradient($loc, $start, $end)
@mixin radius($radius)
-moz-border-radius: $radius
-ms-border-radius: $radius
-o-border-radius: $radius
-webkit-border-radius: $radius
border-radius: $radius
@mixin shadow($shadow)
-moz-box-shadow: $shadow
-ms-box-shadow: $shadow
-o-box-shadow: $shadow
-webkit-box-shadow: $shadow
box-shadow: $shadow
@mixin transform($transform)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
-webkit-transform: rotate(45deg)
transform: rotate(45deg)
$bg_color: #3b98b6
$bg_gradient: darken($bg_color, 8%)
$hover_bg_color: darken($bg_color, 9%)
$hover_bg_gradient: darken($bg_color, 14%)
$icon_bg_color: darken($bg_color, 3%)
$icon_bg_gradient: lighten($bg_color, 20%)
.sinewave-button
-webkit-background-clip: border-box
-webkit-background-origin: padding-box
-webkit-background-size: auto
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px
background-attachment: scroll
background-clip: border-box
background-color: rgba(0, 0, 0, 0)
background-origin: padding-box
background-size: auto
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
border-top-left-radius: 3px
border-top-right-radius: 3px
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px
box-sizing: border-box
color: rgb(255, 255, 255)
cursor: auto
display: inline-block
font-family: Helvetica, Arial, sans-serif
font-size: 14px
height: 25px
line-height: 15px
overflow-x: hidden
overflow-y: hidden
position: relative
text-decoration: none solid rgb(255, 255, 255)
text-shadow: rgba(0, 0, 0, 0.49804) 0px 1px 0px, rgba(0, 0, 0, 0.2) 0px 0px 2px
@include background-gradient($bg_color, top, $bg_color, $bg_gradient)
span:before
@include background-gradient($icon_bg_color, top, $icon_bg_gradient, $icon_bg_color)
&:hover
@include background-gradient($hover_bg_color, top, $hover_bg_color, $hover_bg_gradient)
color: white
&:active, &:focus
@include shadow(none)
color: #fff
top: 1px
&:before
@include background-gradient($icon_bg_color, -45deg, $icon_bg_color, $icon_bg_gradient)
@include shadow('1px -1px 1px rgba(0, 0, 0, 0.1)')
@include transform('rotate(45deg)')
content: ''
display: block
height: 26px
width: 26px
position: absolute
left: 2px
top: 50%
margin-top: -13px
z-index: 0
&:after
@include radius(3px)
@include shadow('inset 0 -1px 0 rgba(0, 0, 0, 0.3)')
content: ''
display: block
height: 100%
width: 100%
position: absolute
left: 0
top: 0
bottom: 0
right: 0
z-index: 10
span
display: inline-block
padding: 5px 10px 5px 40px
&:after
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAQCAMAAADDGrRQAAABmFBMVEUAAAA2MzMdFBo2ODkwJisxIRscDi01NDYwFgofFC0yLjAkHC/3maodEiwnIS/vOVUxHRT5t8T2hpz6qLj/7fP/9PdCRVE1PDH0XHzfXnkdES4xFAgpITIgFC8kGjExFAgpGB40IBgzGxE2JyHvQGQoufSf5EMqwf6Lw0EtreMsqd4hsOgjIiXqAClAUCv2KVIlT12X1UOZ20KQyESU0kAiPEj/QHT0UXQryv+Lxj38QmOFyzr/OntYmswrxP8kGRRNYjBUbjHrETg3Pi5WczAkXHUnWG4rOD7sET3tLVTsIUo+WzGW2ECm70UqLx7+K1juPGB7yDjZElYqvPgKMDSekEztRmX/QGfsRWrOEyo0Pidy9DIsu/cSruSZ2kP2QXKro1NVgq3kU3kwtO/tTG8rLyWc3kUAz/+NyEIsJycgHCbrXnh62jN62DLJh2uJqR2CuDk7X1AgLjStqlMBu/bdYYai5kYko9gjq+InpvAVpv8ax/+fySP/ToqjwTVVwZwklsbNgpZns5mYgq1v6Ly48CoKt/ATf8ED0x94AAAAJHRSTlMAEToFINTCFuC8Mbt25+HVsFeedjgVUFHsz7XyV51/8KmTv2KmDtV7AAAA4klEQVQY02OAAUF+HgY0IKzrpCuEKiSq76Xi6SGCEGBhEpf0VwlQ0ZcQY2IBizCyuhuERIZHqISZBfl5O/OxA8U4XFWDYxOTrFLizUMDjXxceBkYBNwsVDWT022tzG0Sok2MDX0dORlYDdRjtDS1tUvNsjOsLTUM1Ry4GZg5TNXVtTRLmm3ycow14tT0OEF2SJuqqmu12dYW52qkGemxgS1mly/StquobKyzVjOJAgpBBDl0yi2qmmrKLFOl4I5mVrJvqK5vLdCRRfabon17S36WHKqHlXUKM2XQA4ZLgQvGBADcACsC8ZI0XAAAAABJRU5ErkJggg==) 10px center no-repeat
content: ''
display: block
width: 31px
position: absolute
bottom: 0
left: -3px
top: 0
z-index: 10
&:before
@include background-gradient($icon_bg_color, top, $icon_bg_gradient, $icon_bg_color)
@include radius('3px 0 0 3px')
content: ''
display: block
height: 100%
width: 20px
position: absolute
bottom: 0
left: 0
top: 0
z-index: 1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment