Remove underline between button and link

Question

I have an HTML link

<a href='#'><button>+</button> Show advanced options</a>

which reveals the hidden options upon clicking the button or link. The problem is that there is an underline between the button and the text (just the one character before "Show".) Is there any way to remove it?

Move the button outside of the link (I'm pretty certain it's invalid to nest interactive elements, regardless of the CSS problems.) — David Thomas, May 27 '13 at 20:54
Button inside anchor is not valid html http://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5 — the_lotus, May 27 '13 at 20:55
@the_lotus: thanks, I was about to Google for a resource to back up my assertion. =) — David Thomas, May 27 '13 at 20:57

score 11 · Accepted Answer · answered May 27 '13 at 20:55

11

style the hyper link

a {text-decoration: none;}

answered May 27 '13 at 20:55

Nagarjun

2,346
19
28

score 0 · Answer 2 · answered May 27 '13 at 20:55

0

use css text-decoration property :

<a href='#' style='text-decoration:none;'><button>+</button> Show advanced options</a>

but button inside an anchor tag is invalid

you can use onclick event for the button

answered May 27 '13 at 20:55

Mohammad Masoudian

3,483
7
27
45

score 0 · Answer 3 · edited May 27 '13 at 21:04

0

A button tag inside an a tag is not valid. This line comes from the w3 validator:

The element button must not appear as a descendant of the a element.
<a href="test"><button>a</button></a>

edited May 27 '13 at 21:04

Carrie Kendall

11,124
5
61
81

answered May 27 '13 at 21:01

Fons

155
1
9

Remove underline between button and link

3 Answers3