Background of button dont align with shadow in vertical menu - css

Question

I'm doing a project to see how well elders handle flat- vs skeuomorphic design. To do this I want to make the menu 3D and realistic. I found a pre made button that suited my purpose but when i try to make it vertical the shadow fills up the whole parent but the background doesn't.. This is the code im using for the horizontal button: http://jsfiddle.net/ahu8n91o/
HTML:
<a class="button">
<span>TEXT FOR BUTTON</span>
</a>
<a class="button">
<span>BUTTON 2</span>
</a>
<a class="button">
<span>ANOTHER BUTTON</span>
</a>
<a class="button">
<span>LAST BUTTON</span>
</a>
CSS:
.button {
display: inline-block;
margin: 5px;
width: auto;
-webkit-border-radius: 10px;
-webkit-box-shadow:
0px 3px rgba(128,128,128,1), /* gradient effects */
0px 4px rgba(118,118,118,1),
0px 5px rgba(108,108,108,1),
0px 6px rgba(98,98,98,1),
0px 7px rgba(88,88,88,1),
0px 8px rgba(78,78,78,1),
0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.3)),
color-stop(100%,rgba(255,255,255,0.2))),
/* dark outside gradient */
-webkit-gradient(
linear,
left top,
right top,
color-stop(0%,rgba(210,210,210,0.3)),
color-stop(20%,rgba(210,210,210,0)),
color-stop(80%,rgba(210,210,210,0)),
color-stop(100%,rgba(210,210,210,0.3))),
/* light inner gradient */
-webkit-gradient(
linear,
left top,
right top,
color-stop(0%,rgba(255,255,255,0)),
color-stop(20%,rgba(255,255,255,0.5)),
color-stop(80%,rgba(255,255,255,0.5)),
color-stop(100%,rgba(255,255,255,0)));
-webkit-box-shadow:
0px -1px #fff, /* top highlight */
0px 1px 1px #FFFFFF; /* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 20px;
color: #3A474D;
font-weight: 700;
font-size: 1.2em;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button:hover span{
-webkit-transform: translate(0, 1px); /* depth of button press */
}
.button:active {
-webkit-box-shadow:
0px 3px rgba(128,128,128,1),
0px 4px rgba(118,118,118,1),
0px 5px rgba(108,108,108,1),
0px 6px rgba(98,98,98,1),
0px 7px rgba(88,88,88,1),
0px 8px rgba(78,78,78,1),
0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
}
.button:active span{
-webkit-transform: translate(0, 5px); /* depth of button press */
}
But when i try to make it vertical it mess up like this: http://jsfiddle.net/ahu8n91o/1/
HTML:
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css" >
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" >
<div class="container">
<a class="button">
<span>TEXT FOR BUTTON</span>
</a>
<a class="button">
<span>BUTTON 2</span>
</a>
<a class="button">
<span>ANOTHER BUTTON</span>
</a>
<a class="button">
<span>LAST BUTTON</span>
</a>
</div>
CSS:
.container {
float: left;
height: 100%;
margin-right: 30px;
}
.button {
display: block;
margin: 5px;
width: auto;
-webkit-border-radius: 10px;
-webkit-box-shadow:
0px 3px rgba(128,128,128,1), /* gradient effects */
0px 4px rgba(118,118,118,1),
0px 5px rgba(108,108,108,1),
0px 6px rgba(98,98,98,1),
0px 7px rgba(88,88,88,1),
0px 8px rgba(78,78,78,1),
0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.3)),
color-stop(100%,rgba(255,255,255,0.2))),
/* dark outside gradient */
-webkit-gradient(
linear,
left top,
right top,
color-stop(0%,rgba(210,210,210,0.3)),
color-stop(20%,rgba(210,210,210,0)),
color-stop(80%,rgba(210,210,210,0)),
color-stop(100%,rgba(210,210,210,0.3))),
/* light inner gradient */
-webkit-gradient(
linear,
left top,
right top,
color-stop(0%,rgba(255,255,255,0)),
color-stop(20%,rgba(255,255,255,0.5)),
color-stop(80%,rgba(255,255,255,0.5)),
color-stop(100%,rgba(255,255,255,0)));
-webkit-box-shadow:
0px -1px #fff, /* top highlight */
0px 1px 1px #FFFFFF; /* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 20px;
color: #3A474D;
font-weight: 700;
font-size: 1.2em;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button:hover span{
-webkit-transform: translate(0, 1px); /* depth of button press */
}
.button:active {
-webkit-box-shadow:
0px 3px rgba(128,128,128,1),
0px 4px rgba(118,118,118,1),
0px 5px rgba(108,108,108,1),
0px 6px rgba(98,98,98,1),
0px 7px rgba(88,88,88,1),
0px 8px rgba(78,78,78,1),
0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
}
.button:active span{
-webkit-transform: translate(0, 5px); /* depth of button press */
}
I can't see what the problem is and or why the to elements dont act the same.. Maybe i'm just to tired to see the obvious but I would really appreciate some help!

Answer 1

You can change the button span from inline-block to:button span {display: block}. Then it will fill up the surface, but all buttons will be equal width. If you want variable width, change the button to button {display: inline-block} and add a div around each button instead.
You might want some more margin-bottom on the buttons as well.
PS: That code is a bit complicated and unsemantic. You wouldn't have this problem if the styling was applied to a single <button></button>.