How to make a button in Bootstrap look like a normal link in nav-tabs

Question

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  lt ul class  nav nav-tabs nav-stacked  gt  container  The markup will end up like this    lt form action       method  post  gt     lt div class  row-fluid  gt       lt  -- Navigation for the form -- gt       lt div class  span3  gt         lt ul class  nav nav-tabs nav-stacked  gt           lt li gt  lt button type  submit  name  op  value  Link 1  gt Link 1 lt  button gt  lt  li gt           lt li gt  lt button type  submit  name  op  value  Link 2  gt Link 2 lt  button gt  lt  li gt           lt  --     -- gt         lt  ul gt       lt  div gt       lt  -- The actual form -- gt       lt div class  span9  gt         lt  --     -- gt       lt  div gt     lt  div gt   lt  form gt    Does Bootstrap have any way to make these  lt button gt s look like they were actually  lt a gt s

User · Answer

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.

User · Answer

Just get rid of the background color  borders and add hover effects  Here s a fiddle  http   jsfiddle net yPU29    lt form action       method  post  gt   lt div class  row-fluid  gt   lt  -- Navigation for the form -- gt   lt div class  span3  gt     lt ul class  nav nav-tabs nav-stacked  gt       lt li gt  lt button type  submit  name  op  value  Link 1  class  button-link  gt Link 1 lt  button gt  lt  li gt       lt li gt  lt button type  submit  name  op  value  Link 2  class  button-link  gt Link 2 lt  button gt  lt  li gt       lt  --     -- gt     lt  ul gt   lt  div gt   lt  -- The actual form -- gt   lt div class  span9  gt     lt  --     -- gt   lt  div gt   lt  div gt   lt  form gt    CSS    button-link   background-color  transparent  border  none      button-link hover   color  blue  text-decoration  underline

User · Answer

As noted in the official documentation  simply apply the class es  btn btn-link    lt  -- Deemphasize a button by making it look like a link while maintaining button behavior -- gt   lt button type  button  class  btn btn-link  gt Link lt  button gt    For example  with the code you have provided    x000D   x000D   lt link href    maxcdn bootstrapcdn com bootstrap 3 3 1 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   x000D   lt form action       method  post  gt  x000D     lt div class  row-fluid  gt  x000D       lt  -- Navigation for the form -- gt  x000D       lt div class  span3  gt  x000D         lt ul class  nav nav-tabs nav-stacked  gt  x000D           lt li gt  x000D             lt button class  btn btn-link  role  link  type  submit  name  op  value  Link 1  gt Link 1 lt  button gt  x000D           lt  li gt  x000D           lt li gt  x000D             lt button class  btn btn-link  role  link  type  submit  name  op  value  Link 2  gt Link 2 lt  button gt  x000D           lt  li gt  x000D           lt  --     -- gt  x000D         lt  ul gt  x000D       lt  div gt  x000D       lt  -- The actual form -- gt  x000D       lt div class  span9  gt  x000D         lt  --     -- gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

In bootstrap 3  this works well for me    btn-link btn-anchor       outline  none  important      padding  0      border  0      vertical-align  baseline      Used like    lt button type  button  class  btn-link btn-anchor  gt My Button lt  button gt    Demo

User · Answer

I ve tried all examples  posted here  but they do not work without extra CSS  Try this    lt a href  http   www google com  gt  lt button type  button  class  btn btn-success  gt Google lt  button gt  lt  a gt    Works perfectly without any extra CSS

User · Answer

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

[html] How to make a <button> in Bootstrap look like a normal link in nav-tabs?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap