<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.