How to make a <button> in Bootstrap look like a normal link in nav-tabs?
HtmlCssTwitter BootstrapHtml Problem Overview
I'm working in (formerly Twitter) Bootstrap 2 and I wanted to style buttons as though they were normal links. Not just any normal links, though; these are going in a <ul class="nav nav-tabs nav-stacked">
container. The markup will end up like this:
<form action="..." method="post">
<div class="row-fluid">
<!-- Navigation for the form -->
<div class="span3">
<ul class="nav nav-tabs nav-stacked">
<li><button type="submit" name="op" value="Link 1">Link 1</button></li>
<li><button type="submit" name="op" value="Link 2">Link 2</button></li>
<!-- ... -->
</ul>
</div>
<!-- The actual form -->
<div class="span9">
<!-- ... -->
</div>
</div>
</form>
Does Bootstrap have any way to make these <button>
s look like they were actually <a>
s?
Html Solutions
Solution 1 - Html
As noted in the official documentation, simply apply the class(es) btn btn-link
:
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
For example, with the code you have provided:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form action="..." method="post">
<div class="row-fluid">
<!-- Navigation for the form -->
<div class="span3">
<ul class="nav nav-tabs nav-stacked">
<li>
<button class="btn btn-link" role="link" type="submit" name="op" value="Link 1">Link 1</button>
</li>
<li>
<button class="btn btn-link" role="link" type="submit" name="op" value="Link 2">Link 2</button>
</li>
<!-- ... -->
</ul>
</div>
<!-- The actual form -->
<div class="span9">
<!-- ... -->
</div>
</div>
</form>
Solution 2 - Html
Just make regular link look like button :)
<a href="#" role="button" class="btn btn-success btn-large">Click here!</a>
"role" inside a href code makes it look like button, ofc you can add more variables such as class.
Solution 3 - Html
Just add remove_button_css as class to your button tag. You can verify the code for Link 1
.remove_button_css {
outline: none;
padding: 5px;
border: 0px;
box-sizing: none;
background-color: transparent;
}
Extra Styles Edit
Add color: #337ab7;
and :hover
and :focus
to match OOTB (bootstrap3)
.remove_button_css:focus,
.remove_button_css:hover {
color: #23527c;
text-decoration: underline;
}
Solution 4 - Html
In bootstrap 3, this works well for me:
.btn-link.btn-anchor {
outline: none !important;
padding: 0;
border: 0;
vertical-align: baseline;
}
Used like:
<button type="button" class="btn-link btn-anchor">My Button</button>
Solution 5 - Html
Just get rid of the background color, borders and add hover effects. Here's a fiddle: http://jsfiddle.net/yPU29/
<form action="..." method="post">
<div class="row-fluid">
<!-- Navigation for the form -->
<div class="span3">
<ul class="nav nav-tabs nav-stacked">
<li><button type="submit" name="op" value="Link 1" class="button-link">Link 1</button></li>
<li><button type="submit" name="op" value="Link 2" class="button-link">Link 2</button></li>
<!-- ... -->
</ul>
</div>
<!-- The actual form -->
<div class="span9">
<!-- ... -->
</div>
</div>
</form>
CSS:
.button-link {
background-color: transparent;
border: none;
}
.button-link:hover {
color: blue;
text-decoration: underline;
}
Solution 6 - Html
I've tried all examples, posted here, but they do not work without extra CSS. Try this:
<a href="http://www.google.com"><button type="button" class="btn btn-success">Google</button></a>
Works perfectly without any extra CSS.
Solution 7 - Html
here is a example:
<form method="POST" >
<button type="submit" class=" linkish my-1 far fa-thumbs-down fa-2x"> </button>
<button type="submit" class=" linkish btn btn-primary">click me</button>
</form>
and css style :
.linkish {
background-color: transparent!important;
border: 0!important;
color: blue!important;
cursor: pointer!important;
display: inline!important;
margin: 0!important;
outline: none!important;
padding: 0!important;
text-decoration: none!important;
}
.linkish:hover {
text-decoration: underline!important;
}
this is just example , and change it based on your case / requirements.
i hope this helpful .