Skip to content

Instantly share code, notes, and snippets.

@airen
Forked from gentle-media/dabblet.css
Created April 3, 2012 03:30
Show Gist options
  • Save airen/2289080 to your computer and use it in GitHub Desktop.
Save airen/2289080 to your computer and use it in GitHub Desktop.
CSS3 ribbon buttons
/**
* CSS3 ribbon buttons
*/
.ribbonA{
position: relative;
display: block;
width: 258px;
height: 50px;
font: .9em/50px Georgia, "Times New Roman", Times, serif;
color: #EEE;
text-align: center;
text-transform: uppercase;
letter-spacing: .2em;
text-indent: .2em;
margin: 150px auto;
background: #5b5b5b;
background: linear-gradient(left, #444 0%,#555 25%,#5b5b5b 50%,#555 75%,#444 100%);
border-left: 1px solid #000;
border-right: 1px solid #000;
box-shadow: 0 8px 20px -6px #888}
.ribbonA:before,
.ribbonA:after {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #000 #000 transparent transparent}
.ribbonA:after {
left: auto;
right: 0;
border-color: #000 transparent transparent #000}
.ribbonA a {
display: block;
text-decoration: none;
color: #EEE}
.ribbonA a:before,
.ribbonA a:after {
content: "";
position: absolute;
width: 30px;
height: 0;
left: -50px;
top: 10px;
border-width: 25px 20px;
border-style: solid;
border-color: #555 #555 #555 transparent;
z-index: -1;
box-shadow: 8px 8px 10px -6px #AAA}
.ribbonA a:after {
left: auto;
right: -50px;
border-color: #555 transparent #555 #555;
box-shadow: -8px 8px 10px -6px #AAA}
.ribbonB{
position: relative;
display: block;
width: 298px;
height: 50px;
font: 1em/50px Georgia, "Times New Roman", Times, serif;
color: #EEE;
text-align: center;
letter-spacing: .2em;
text-transform: uppercase;
margin: 150px auto;
background: #5b5b5b;
background: linear-gradient(left, #444 0%,#555 25%,#5b5b5b 50%,#555 75%,#444 100%);
border-left: 1px solid #000;
border-right: 1px solid #000;
box-shadow: 0 8px 20px -6px #888}
.ribbonB:before,
.ribbonB:after {s
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #000 #000 transparent transparent}
.ribbonB:after {
left: auto;
right: 0;
border-color: #000 transparent transparent #000}
.ribbonB a {
position: relative;
display: block;
width: 100px;
height: 100px;
top: -25px;
margin: 0 auto;
border-radius: 50px;
background: #585858;
text-decoration: none;
color: #EEE;
white-space: nowrap;
line-height: 100px;
text-indent: -3.4em;
box-shadow: 0 8px 20px -6px #999}
.ribbonB a:before,
.ribbonB a:after {
content: "";
position: absolute;
width: 30px;
height: 0;
left: -150px;
top: 35px;
border-width: 25px 20px;
border-style: solid;
border-color: #555 #555 #555 transparent;
z-index: -1;
box-shadow: 8px 8px 10px -6px #AAA}
.ribbonB a:after {
left: auto;
right: -150px;
border-color: #555 transparent #555 #555;
box-shadow: -8px 8px 10px -6px #AAA}
<h2 class="ribbonA"><a href="#">my ribbon button</a></h2>
<h2 class="ribbonB"><a href="#">my ribbon button</a></h2>
{"view":"split","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment