Remove dash between two button links

Question

I have created a page with two buttons (that are links) on a page. For an uknown reason, a dash displays between the buttons in chrome, ff, and ie. I am trying to get just a little bit of space between the buttons instead of this weird dash. Here is some simple sample code to replicate the issue:

<!DOCTYPE html>
<meta charset='utf-8'> 

<html>
    <head><title>Button Dashes?</title></head>
    <body>
        <div>
            <a href="http://www.google.com">
                <button>Google</button>
            </a>
            <a href="http://www.yahoo.com">
                <button>Yahoo</button>
            </a>
        </div>
    </body>
</html>

What do I need to do to remove the dash between the buttons?

That's called whitespace, why do you have buttons in links anyway? — Musa, Apr 18 '13 at 18:59
The dash is a white-space character after the button which is underlined because it is in an anchor. Remove it and you'll be fine. — xpy, Apr 18 '13 at 19:01
Whitespace is space that is white. This is a distinct dash. I have the page structured the way it is from following this SO question: http://stackoverflow.com/questions/3341011/making-a-button-thats-a-link-in-html — Russ, Apr 18 '13 at 19:02

score 6 · Accepted Answer · edited May 23 '17 at 11:43

6

Update your code to this:

    <div>
        <a href="http://www.google.com"><button>Google</button></a>
        <a href="http://www.yahoo.com"><button>Yahoo</button></a>
    </div>

Default style for links have underlines so the whitespace is going to be just an underline. Here is an example: http://jsfiddle.net/wCfBR/

Here are some alternative ways to make buttons act like links: How to create an HTML button that acts like a link?

edited May 23 '17 at 11:43

Community

1
1

answered Apr 18 '13 at 18:59

Paul

12,392
4
48
58

My mistake, I didn't understand. What I thought was just formatting code was adding whitespace. My mistake, thanks for the quick response and the helpful link. – Russ Apr 18 '13 at 19:08

score 2 · Answer 2 · answered Apr 18 '13 at 19:00

2

Either declare in a CSS file, or directly on the anchor element, a text-decoration of none

<a href="http://www.google.com" style="text-decoration : none;">

answered Apr 18 '13 at 19:00

Bryan

6,682
2
17
21

score 0 · Answer 3 · answered Jun 22 '21 at 15:08

0

Set text-decoration: none; on your anchor tags that wrapped the button.

answered Jun 22 '21 at 15:08

Lamphrangmi Lamin

11
2
3

Remove dash between two button links

3 Answers3