Skip to content

Instantly share code, notes, and snippets.

@EvanLovely

EvanLovely/Double-Negative-Borders.markdown

Created February 20, 2014 01:51
Show Gist options
  • Save EvanLovely/9105533 to your computer and use it in GitHub Desktop.
Save EvanLovely/9105533 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Evan Lovely.
Raw
index.html
<a href="#" class="btn">Button</a>
Raw
style.scss
@import "compass";
.btn {
display: inline-block;
color: white;
border: 0;
line-height: 1.5;
font-size: 1.25em;
padding: .3em 1em;
margin: 1em 0 0 2em;
text-decoration: none;
text-transform: uppercase;
text-align: center;
//Hat tip for negative border-radius trick: http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
$teal: hsl(180, 24.6%, 55.3%);
$btn-radius-1: 7px;
$btn-radius-2: $btn-radius-1 + 1;
$btn-color: $teal;
background:
-moz-radial-gradient(0 100%, circle, $btn-color $btn-radius-1, $btn-color $btn-radius-2),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) $btn-radius-1, $btn-color $btn-radius-2),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) $btn-radius-1, $btn-color $btn-radius-2),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) $btn-radius-1, $btn-color $btn-radius-2);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) $btn-radius-1, $btn-color $btn-radius-2),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) $btn-radius-1, $btn-color $btn-radius-2),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) $btn-radius-1, $btn-color $btn-radius-2),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) $btn-radius-1, $btn-color $btn-radius-2);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) $btn-radius-1, $btn-color $btn-radius-2),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) $btn-radius-1, $btn-color $btn-radius-2),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) $btn-radius-1, $btn-color $btn-radius-2),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) $btn-radius-1, $btn-color $btn-radius-2);
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
position: relative;
&:before {
content: '';
display: block;
z-index: -1;
position: absolute;
top: -3px;
bottom: -3px;
right: -3px;
left: -3px;
$btn-before-radius-1: 7px;
$btn-before-radius-2: $btn-before-radius-1 + 1;
$btn-before-color: $teal;
background:
-moz-radial-gradient(0 100%, circle, $btn-before-color $btn-before-radius-1, $btn-before-color $btn-before-radius-2),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) $btn-before-radius-1, $btn-before-color $btn-before-radius-2),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) $btn-before-radius-1, $btn-before-color $btn-before-radius-2),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) $btn-before-radius-1, $btn-before-color $btn-before-radius-2);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) $btn-before-radius-1, $btn-before-color $btn-before-radius-2),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) $btn-before-radius-1, $btn-before-color $btn-before-radius-2),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) $btn-before-radius-1, $btn-before-color $btn-before-radius-2),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) $btn-before-radius-1, $btn-before-color $btn-before-radius-2);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) $btn-before-radius-1, $btn-before-color $btn-before-radius-2),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) $btn-before-radius-1, $btn-before-color $btn-before-radius-2),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) $btn-before-radius-1, $btn-before-color $btn-before-radius-2),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) $btn-before-radius-1, $btn-before-color $btn-before-radius-2);
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
&:after {
content: '';
display: block;
z-index: -1;
position: absolute;
top: -2px;
bottom: -2px;
right: -2px;
left: -2px;
$btn-after-radius-1: 7px;
$btn-after-radius-2: $btn-after-radius-1 + 1;
$btn-after-color: white;
background:
-moz-radial-gradient(0 100%, circle, $btn-after-color $btn-after-radius-1, $btn-after-color $btn-after-radius-2),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) $btn-after-radius-1, $btn-after-color $btn-after-radius-2),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) $btn-after-radius-1, $btn-after-color $btn-after-radius-2),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) $btn-after-radius-1, $btn-after-color $btn-after-radius-2);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) $btn-after-radius-1, $btn-after-color $btn-after-radius-2),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) $btn-after-radius-1, $btn-after-color $btn-after-radius-2),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) $btn-after-radius-1, $btn-after-color $btn-after-radius-2),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) $btn-after-radius-1, $btn-after-color $btn-after-radius-2);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) $btn-after-radius-1, $btn-after-color $btn-after-radius-2),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) $btn-after-radius-1, $btn-after-color $btn-after-radius-2),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) $btn-after-radius-1, $btn-after-color $btn-after-radius-2),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) $btn-after-radius-1, $btn-after-color $btn-after-radius-2);
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
&:hover, &:focus {
text-decoration: underline;
color: white;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment