<div>
<p>Border Only Buttons</p>
<a href="#"><span class="button dimond">DIAMOND</span></a>
<a href="#"><span class="button ribbon">RIBBON</span></a>
<a href="#"><span class="button battlestar">BATTLESTAR</span></a>
<a class="button box" href="#">BOX</a>
<a class="button obligetory-rounded" href="#">ROUNDED</a>
</div>
@import "bourbon";
body {
font-family:futura;
color:white;
background-image:
-webkit-linear-gradient(125deg, transparent 30%, rgba(255,165,0, 0.75)),
-webkit-linear-gradient(45deg, #207261, #002B36);
background-image:
-moz-linear-gradient(125deg, transparent 30%, rgba(255,165,0, 0.75)),
-moz-linear-gradient(45deg, #207261, #002B36);
background-image:
-o-linear-gradient(125deg, transparent 30%, rgba(255,165,0, 0.75)),
-o-linear-gradient(45deg, #207261, #002B36);
background-image:
linear-gradient(125deg, transparent 30%, rgba(255,165,0, 0.75)),
linear-gradient(45deg, #207261, #002B36);
}
$hover-color: #cfb4f7;
div {
text-align:center;
margin:2em auto 4em;
max-width:600px;
}
a {
text-decoration:none;
color:white;
overflow:hidden;
display:block;
margin:0.75em;
}
.button {
letter-spacing:.5em;
text-decoration:center;
padding:0.75em 1.25em 0.75em 1.75em;
border-color:white;
border-width:2px;
border-style:solid;
white-space: nowrap;
-webkit-transition: border-color 500ms ease, color 250ms ease;;
-moz-transition: border-color 500ms ease, color 250ms ease;;
-ms-transition: border-color 500ms ease, color 250ms ease;;
-o-transition: border-color 500ms ease, color 250ms ease;;
transition: border-color 500ms ease, color 250ms ease;;
}
.button:hover {
color:$hover-color;
border-color:$hover-color;
}
.button:before,
.button:after {
border-style:solid;
border-color:white;
border-width:0;
-webkit-transition: border-color 500ms ease;;
-moz-transition: border-color 500ms ease;;
-ms-transition: border-color 500ms ease;;
-o-transition: border-color 500ms ease;;
transition: border-color 500ms ease;;
}
a:hover .button:before,
a:hover .button:after {
border-color:$hover-color;
}
// Diamond Button
.dimond {
border-width:2px 0;
position:relative;
display:block;
padding:0.75em 0 0.75em 0.5em;
margin-left:1.6em;
margin-right:1.6em;
}
.dimond:before {
content: "";
display:inline-block;
border-bottom-width:2px;
border-left-width:2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
position:absolute;
top:-50%;
bottom:50%;
left:-1.55em;
right:0;
}
.dimond:after {
content: "";
display:inline-block;
border-bottom-width:2px;
border-right-width:2px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
position:absolute;
top:-50%;
bottom:50%;
left:0;
right:-1.55em;
}
// Ribbon Button
.ribbon {
border-width:2px 0;
position:relative;
display:block;
padding:0.75em 0 0.75em 0.5em;
}
.ribbon:before {
content: "";
display:inline-block;
border-bottom-width:2px;
border-left-width:2px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
position:absolute;
top:-50%;
bottom:50%;
left:1.6em;
right:0;
}
.ribbon:after {
content: "";
display:inline-block;
border-bottom-width:2px;
border-right-width:2px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
position:absolute;
top:-50%;
bottom:50%;
left:0;
right:1.6em;
}
// Battlestar Button
.battlestar {
border-width:2px 0;
position:relative;
display:block;
padding:0.75em 0 0.75em 0.5em;
margin-left:1.0em;
margin-right:1.0em;
}
.battlestar:before {
content: "";
border-width:2px;
border-right:0;
border-left-width:50px;
position:absolute;
width:200px;
-webkit-transform: perspective(300px) rotateY(-87deg);
-moz-transform: perspective(300px) rotateY(-87deg);
-ms-transform: perspective(300px) rotateY(-87deg);
-o-transform: perspective(300px) rotateY(-87deg);
transform: perspective(300px) rotateY(-87deg);
top:16%;
bottom:16%;
left:-8.3em;
right:0;
}
.battlestar:after {
content: "";
border-width:2px;
border-left:0;
border-right-width:50px;
position:absolute;
width:200px;
-webkit-transform: perspective(300px) rotateY(87deg);
-moz-transform: perspective(300px) rotateY(87deg);
-ms-transform: perspective(300px) rotateY(87deg);
-o-transform: perspective(300px) rotateY(87deg);
transform: perspective(300px) rotateY(87deg);
top:16%;
bottom:16%;
right:-8.3em;
}
// IOS7 style rounded thing
.obligetory-rounded {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
// Basic (with cheeky shadow)
.box {
text-shadow:0 1px 5px rgba(0,0,0,0.5);
box-shadow:0 1px 5px 2px rgba(0,0,0,0.25),
inset 0 1px 5px 2px rgba(0,0,0,0.25);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.