3D Hexagon button

Question

I'm helping a friend out with a website and she has pretty specific type of button in mind:

"I would like the buttons to be hexagon shape, with a photo in the middle and actually depress as clicked before moving to the portfolio page."

I've managed to create a rounded square that depresses using CSS and HTML pretty easily, however I can't work out a hexagon. Anyone offer some help here?

Fiddle

HTML:

<a href="#" class="button">
<span>
<p> Jorgie</p></span>
</a>

CSS:

.button {
display: inline-block;
margin: 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:    0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
-moz-box-shadow: 0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
box-shadow: 0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
-moz-transition: -moz-box-shadow .1s ease-in-out;
-o-transition: -o-box-shadow .1s ease-in-out;
transition: box-shadow .1s ease-in-out;
font-size: 20px;
color: #fff;
}

.button span {
display: inline-block;
background-color: black;
 -webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
font-family: 'Pacifico', Arial, sans-serif;
line-height: 1;
text-shadow: 0 -1px 1px rgba(175, 49, 95, .7);
-webkit-transition: background-color .2s ease-in-out, -webkit-transform .1s ease-in-    out;
-moz-transition: background-color .2s ease-in-out, -moz-transform .1s ease-in-out;
-o-transition: background-color .2s ease-in-out, -o-transform .1s ease-in-out;
transition: background-color .2s ease-in-out, transform .1s ease-in-out;
}

.button:hover span {
background-image:url(jorgie.jpg);
background-repeat:no-repeat;
background-position:center;
text-shadow: 0 -1px 1px rgba(175, 49, 95, .9), 0 0 5px rgba(255, 255, 255, .8);
}

.button:active, .button:focus {
-webkit-box-shadow:    0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
box-shadow:    0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
}

.button:active span {
-webkit-transform: translate(0, 4px);
-moz-transform: translate(0, 4px);
-o-transform: translate(0, 4px);
transform: translate(0, 4px);
}

Answer 1

Here is a hexagon shaped button adapted from the soluion described in this question : Button with pointed edges and shadow :

The hexagon is made with skewed pseudo elements the shadow is made with box-shadows and the transition on the click event is made with CSS:

DEMO

HTML :

<div class="button top">
    <div class="button bottom"></div>
</div>

CSS :

.top{
    position:relative;
    top:0;
    margin-left:150px;
    width: 45px;
    height: 60px;

    -webkit-transition: top .1s;
    -ms-transition: top .1s;
    transition: top .1s;
}
.button:before, .button:after{
    position: absolute;
    width:70%; height:50%;    
    content: "";  
    z-index:-1;
}
.top:before {
    left:0; top:0;
    -webkit-transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    transform:skewX(-20deg);
    background: #469BF9;
    box-shadow: -5px 10px 0px -5px #104f96;
    z-index:-2;
}
.top:after {
    right:0; top:0;
    -webkit-transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    transform:skewX(20deg);
    background: #469BF9;
    box-shadow: 5px 10px 0px -5px #104f96;
    z-index:-2;
}
.bottom:before{
    left:0; top:50%; transitions.
    -webkit-transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    transform:skewX(20deg);
    background: #1E80F7;
    box-shadow: -4px 5px 0px 0px #104f96;
}
.bottom:after{
    right:0; top:50%;
    -webkit-transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    transform:skewX(-20deg);
    background: #1E80F7;
    box-shadow: 4px 5px 0px 0px #104f96;
}

.button:after, .button:before{
    -webkit-transition: box-shadow .1s;
    -ms-transition: box-shadow .1s;
    transition: box-shadow .1s;
}
.top:active{
    top:5px;
}
.button:active:after, .button:active:before, .button:active .button:before, .button:active .button:after {
    box-shadow: 0px 0px 0px 0px #104f96;
}