Skip to content

Instantly share code, notes, and snippets.

@CombatCreative

CombatCreative/CSS-Button-with-Angled-Sides.markdown

Created September 7, 2014 13:10
Show Gist options
  • Save CombatCreative/58f70d721c4b0dcfe842 to your computer and use it in GitHub Desktop.
Save CombatCreative/58f70d721c4b0dcfe842 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Jarad Light.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>button test</title>
<meta name="generator" content="BBEdit 10.5" />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<a href="#" class="btn double">DEATH METAL</a>
<a href="#" class="btn">DEATH METAL</a>
<!-- SVG Filter for Firefox-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="10" dy="20" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
<filter id="f2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="5" dy="10" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</svg>
</body>
</html>
Raw
style.css
body {
font-size: 16px/1.4;
margin: 5em;
background: #667;
}
.btn {
display: inline-block;
background: #333;
border: .125em solid #000;
padding: .5em 1em;
position: relative;
color: #fff;
font: 1.5em/1.4 'Oswald', helvetica, arial, sans-serif;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
-webkit-filter: drop-shadow(.5em 1em .25em rgba(0,0,0,.4));
-moz-filter: drop-shadow(.5em 1em .25em rgba(0,0,0,.4));
-o-filter: drop-shadow(.5em 1em .25em rgba(0,0,0,.4));
-ms-filter: drop-shadow(.5em 1em .25em rgba(0,0,0,.4));
filter: url(#f1);
filter: drop-shadow(.5em .5em .25em rgba(0,0,0,.4));
margin-right: 3em;
}
.btn:active {
-webkit-filter: drop-shadow(.25em .5em .25em rgba(0,0,0,.4));
-moz-filter: drop-shadow(.25em .5em .25em rgba(0,0,0,.4));
-o-filter: drop-shadow(.25em .5em .25em rgba(0,0,0,.4));
-ms-filter: drop-shadow(.25em .5em .25em rgba(0,0,0,.4));
filter: url(#f2);
filter: drop-shadow(.25em .5em .25em rgba(0,0,0,.4));
-webkit-transform: translate(.25em, .5em);
-moz-transform: translate(.25em, .5em);
transform: translate(.25em, .5em);
}
.btn.double:before,
.btn:after {
content: "";
position: absolute;
display: block;
background: #333;
border: .125em solid #000;
width: 1.125em;
height: 100%;
top: -.125em;
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
transform-origin: bottom left;
}
.btn:after {
right: -.25em;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
transform: skewX(-20deg);
border-left: none;
}
.btn.double:before {
left: -.25em;
-webkit-transform: skewX(20deg);
-moz-transform: skewX(20deg);
transform: skewX(20deg);
border-right: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment