1

I am working on my own alternitave for bootstrap and I am currently working buttons and link. The buttons have anchor tags within the button element but the link styling is showing up.

HTML

<button class="btn-danger"><a href="#">Danger</a></button>
<button class="btn-error"><a href="#">Error</a></button>
<button class="btn-success"><a href="#">Success</a></button>
<button class="btn-info"><a href="#">Info</a></button>

CSS

button.btn-info a:visited a:active a:link a:hover{
    color:#0066CC;
    text-decoration: none;
}
4
  • 2
    Your HTML is invalid. You cannot have a link inside a button (or vice versa). Trying to do this tends to give inconsistent interaction results from browser to browser. If you want a link, use a link. If you want a button, use a button. Apply CSS to make it look however you like.
    – Quentin
    Sep 26, 2015 at 16:33
  • ^ This is a fair comment
    – MrCarrot
    Sep 26, 2015 at 19:33
  • @Quentin then what would i do? Would I make a input element and make it's type button and action to the url?
    – AnonyDev
    Sep 27, 2015 at 15:35
  • 1
    @AnonyDev — It depends what you want to do. If you want a link, then have a link. Apply CSS to make it look however you like.
    – Quentin
    Sep 27, 2015 at 15:36

1 Answer 1

0

You missed the commas out. Change your CSS to

button.btn-info a:visited,
button.btn-info a:active,   
button.btn-info a:link,
button.btn-info a:hover {
    color:#0066CC;
    text-decoration: none;
}

Edit:

Based on Quentin's comment above, he is correct, your HTML is invalid. You shouldn't have an anchor inside a button. I would therefore propose you change your CSS to:

.btn-info {
    color:#0066CC;
    text-decoration: none;
}

And then do either:

<a href="#" class="btn-info">Info</a>

or:

<button class="btn-info">Info</button>

depending on your application.

1
  • Cheers! I have to wait for a bit to mark it as a answer.
    – AnonyDev
    Sep 26, 2015 at 16:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.