how to add space between buttons and it's borders?

Monday, July 7, 2014

enter image description here


what i have is a table with rows and columns and this is a picture of two rows and i have a border that continue without interruption which i did .. and every td has a button and what i want to do is to add space vertically and horizontally as you can see in the image in the arrow .. i mean under each button and on the left and right of the button without effecting the border , here is what i tried :


html code:



<table>
<tr>
<td width="188px" class="button"><img src="b2.png" /></td>

<td width="188px" class="button" ></td>
<td width="188px" class="button" ></td>
<td width="188px" class="button" ></td>
<td width="188px" class="button" ><img src="b1.png" /></td>
<td width="188px" class="button" ></td>
</tr>


Css code:



.button {
width:180px;
text-align:center;
background:rgb(51,153,51);
position:relative;
overflow:hidden;
margin-top:3px;
margin-bottom:3px;
margin-left:1px;
margin-right:12px;
/* add this */
}
.button a{
display:block;
height:37px;
color:white;
line-height:100px;
text-decoration:none;
position:relative;
z-index:10;
}
.button:before {
content:" ";
display:block;
width:180px;
height:37px;
background:rgba(0,0,0,0.5);
position:absolute;
left:0;
top:100%;
transition:all 0.5s;
}
.button:hover:before {
top:0;
}

table td {


margin-top: 10px;
margin-bottom: 10px;
padding: 0px 0px 0px 0px;
border-left:1.0px solid #000;
border-right:1.0px solid #000;
border-spacing:5px;
}
table {
border-collapse: collapse;

}


can anyone help me please?







http://ift.tt/Vy4D6D