How to remove link underline in a Button using CSS

Question

I am familiar with using text-decoration: none in divs and spans. However it doesn't seem to work in buttons. I have the following HTML:

<a href="upgrade.php">
    <input type="button" class="Buttons" id="Upgrade" value="Upgrade">
</a>

and CSS:

.Buttons {
    background-color:#D93F87;
    height:50px;
    width:100px;
    border-radius:10px;
    font-size:32px;
    color:#FFFFFF;
    text-align:center;
    text-shadow: -2px 0 #CCC, 0 1px #CCC, 1px 0 black, 0 -1px black;
    padding-bottom:4px;
    margin:10px;
}
#Upgrade {
    width:150px;    
}
#Upgrade a {
    text-decoration:none;
}

But I still get an underline. I have tried variations using span but that does not help either. Am I doing something wrong above?

Your HTML is invalid. It is forbidden to put an `` inside a link. If you want a link to look like a button then use CSS. — Quentin, May 24 '18 at 12:59
Is this documented somewhere? I'll probably end up using the click event of the button in js since I don't want to change all my buttons (I am sure styling links as buttons will make them look different from the other buttons of that class). — Chiwda, May 24 '18 at 13:09
https://www.w3.org/TR/html5/textlevel-semantics.html#the-a-element — *Content Model: Transparent, but there must be no interactive content or a element descendants.* — Quentin, May 24 '18 at 13:14
"I am sure styling links as buttons will make them look different from the other buttons of that class" — Not if you do it right. — Quentin, May 24 '18 at 13:14
To rephrase, _I_ am not capable of styling buttons and links the same. :-) BTW, as noted in the w3.org link, doesn't **Allowed ARIA role attribute values: link (default - do not set), button, checkbox, radio, switch, tab or treeitem** mean that buttons etc. are allowed? — Chiwda, May 24 '18 at 13:37
It means you can set the `aria-role` to `button`, not that you can have a ` — Quentin, May 24 '18 at 13:40
Leaving aside the sematics and HTML markup--- the OP is attempting a [**parent selector**](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) which does not exist — Paulie_D, May 24 '18 at 14:28
@Paulie_D I don't think the question is a duplicate of the one you referenced. I am not attempting a parent selector - apparently I have created invalid markup by attempting to put an `` tag inside an `` tag as explained by @Quentin — Chiwda, May 25 '18 at 05:21

Zuber · Answer 1 · 2018-05-24T12:26:46.383

2

Just add

a.mainButton, a.mainButton:hover {
  text-decoration: none;
}

You can use .mainButton or any other class to a tag and give it css

You have used #Upgrade to set text-decoration but it will not work as its of input ID

You cannot write css of parent by targeting child element. you have used a tag as the child of #Upgrade in your css but its the opposite

edited May 24 '18 at 12:26

answered May 24 '18 at 12:16

Zuber

3,393
1
19
34

I don't want to do this for all a instances, only in specific instances like in buttons... – Chiwda May 24 '18 at 12:24
see updated answer @Chiwda – Zuber May 24 '18 at 12:27
if you dont wabt to do that for all instance, you can use inline style link this `` – Jayakrishnan May 24 '18 at 12:34

score 0 · Answer 2 · answered May 24 '18 at 12:16

0

#Upgrade a

Means that you select a inside #Upgrade. In you're case it the opposite, #Upgarde is in a.

So you can write

a #Upgrade {...}

Or more simpler

#Upgrade {...}

answered May 24 '18 at 12:16

Alexandre Annic

9,942
5
36
50

Tried both and they don't work! – Chiwda May 24 '18 at 12:23

score 0 · Answer 3 · answered May 24 '18 at 12:30

You might be missing your anchor target you can try using a class like this

  .Buttons {
    background-color:#D93F87;
    height:50px;
    width:100px;
    border-radius:10px;
    font-size:32px;
    color:#FFFFFF;
    text-align:center;
    text-shadow: -2px 0 #CCC, 0 1px #CCC, 1px 0 black, 0 -1px black;
    padding-bottom:4px;
    margin:10px;

   }
   #Upgrade {
        width:150px;
    }
   .test {
      text-decoration: none;

    }

<a class="test" href="upgrade.php">
<input type="button" class="Buttons" id="Upgrade" value="Upgrade">
<span>This text is not underline</span>
</a>

How to remove link underline in a Button using CSS

3 Answers3