how to delete extra space between buttons?

Get rid of the spaces themselves: this may look messy but actually it's the cleanest thing you can do. Anything you achieve with CSS tricks is just putting the spaces there and then denying their existence. Instead, you might want to omit them; the only problem to solve is readability.

So let's make it readable:

<div id="main">
    <div id="menu">
        <!--
        --><a href="#" class="buttons">Home</a><!--
        --><a href="#" class="buttons">About Us</a><!--
        --><a href="#" class="buttons">Pictures</a><!--
        --><a href="#" class="buttons">Contact Us</a><!--
        -->
    </div>
</div>

Again, I know it seems weird, yes, but think about it. The real weirdo here is HTML itself, not giving you a clear way to do this. Consider it a special markup! It could as well be part of the HTML standard; technically, btw, it is 100% standard, you are free to use comments...

Any whitespace between tags in HTML is collapsed into a single space character, which is why you have that gap.

You could:

• Float your elements left,
• Put the </a> and <a> next to each other in the source or
• Use a font-size: 0 trick

In this case, personally I'd float all my <a>s left although removing whitespace from your source comes with the fewest caveats, the only one being that it's more difficult to read.

Look at this jsFiddle

I've updated display:inline-block; to display:block; on the menu links and added float:left to them.

When you use inline-block you will have this ugly inline gap between elements caused by the whitespace between the elements in your HTML markup..

here is your solution

http://jsfiddle.net/NPqSr/7/

.buttons
{
    text-decoration: none;
    color: #ffffff;
    line-height: 3em;
    display: inline-block;
    padding-left: 10px;
    float:left;
    padding-right: 10px;
    font-family: courier new;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}