How to make a

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 <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?

Because I need to maintain the form state that's in the rest of the form. Mainly that means a form session ID, and making it actually a link would mean switching the whole form to GET and putting that data in the `href`. So basically I either have to dramatically change how my form operates or change the presentation. This question is my attempt to find out how easy it is to change the presentation. — meustrus, Nov 14 '13 at 16:00
@VitorVenturin my use case: the default tab has a textarea for inputting markdown. Tab 2 has the HTML preview. So I don't want Tab 2 to have an URL that opens it by default. If I use links, then users can middle click and see a meaningless address location on hover. Button prevents that. — Ciro Santilli OurBigBook.com, Oct 05 '14 at 09:32

score 235 · Answer 1 · edited Jun 08 '18 at 03:38

235

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>

edited Jun 08 '18 at 03:38

Pang

9,564
146
81
122

answered Nov 14 '13 at 16:02

SW4

69,876
20
132
137

8

That does make it no longer look like a button. However, it is not displaying as I want it to within the ul.nav-stacked markup. The CSS for that markup seems to only work with `` tags... – meustrus Nov 14 '13 at 19:36
30

Shows differently than links. – Ciro Santilli OurBigBook.com Oct 05 '14 at 09:35
1

in Bootstrap 3, buttons styled like this *look* like links but they have too much padding around them which messes up the layout. BUT you can fix that by adding a small amount of CSS (see @mcNux answer below) – Martin CR Feb 22 '20 at 17:21

score 20 · Answer 2 · answered Jun 02 '14 at 10:55

20

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.

answered Jun 02 '14 at 10:55

user3699060

401
4
2

26

This is useful but does not answer the question asked. – meustrus Oct 06 '14 at 14:41
23

`I wanted to style buttons as though they were normal links` this is the opposite :S – SW4 Dec 06 '14 at 12:46
`role` attribute is not a valid attribute for the `a` element. (https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element) – nZeus Apr 13 '17 at 20:14
2

This is the opposite of what is being asked – Kunal May 03 '18 at 20:02
The problem with this answer is that the button text in this case is actually styled like a link which is not good (e.g. if you use "$link-decoration: underline !default;" in your _variables.scss). This should be probably noted by developers - perhaps this is not what they wanted to achieve. The link should be styled COMPLETELY as a button. – Dmitry Somov Apr 27 '19 at 08:17
After a bit of experimenting I came to using the ".stretched-link" style to combine a link with a button without applying link styles to the button text. Pay attention to: style="transform: rotate(0);" More details here: https://getbootstrap.com/docs/4.3/utilities/stretched-link/#identifying-the-containing-block – Dmitry Somov Apr 27 '19 at 09:39

score 16 · Answer 3 · edited Jun 14 '17 at 08:08

16

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; 
}

enter image description here

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;
}

edited Jun 14 '17 at 08:08

freedomn-m

27,664
8
35
57

answered Nov 14 '13 at 16:19

Rubyist

6,486
10
51
86

Works perfectly. Added `:hover` and `:focus` for a closer match with bootstrap3. – freedomn-m Jun 14 '17 at 08:09

score 13 · Answer 4 · answered Oct 17 '18 at 11:44

13

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>

Demo

answered Oct 17 '18 at 11:44

mcNux

1,472
1
15
13

Thanks, this is exactly what I needed. Bootstrap 3 .btn-link doesn't cut it and you just have to add a class on your own. – Rafał Cieślak Feb 26 '19 at 14:26
YES this works perfectly. Instantaneously my BS3 form layout has the correct vertical spacing between the rows. Excellent. – Martin CR Feb 22 '20 at 17:13
This is EXACTLY what I was looking for. – Tom Miller Aug 02 '21 at 21:40
In recent versions of Bootstrap (I'm using 5.2) you can do this just using Bootstrap classes (no need for the CSS part of the answer): ` ` – Dietmar Jun 14 '23 at 12:56

score 2 · Answer 5 · answered Jun 02 '14 at 11:01

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;
}

I added a few more CSS elements to make it look exactly like a dropdown link. In total: .button-link { display: block; width: 100%; padding: 3px 20px; clear: both; color: #333; white-space: nowrap; background-color: transparent; border: none; text-align: left; } .button-link:hover { background-color: #f5f5f5; } — Andy Beverley, Sep 11 '14 at 23:50

score 1 · Answer 6 · answered Feb 14 '16 at 11:24

1

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.

answered Feb 14 '16 at 11:24

Alexey Mezenin

158,981
26
290
279

This isn't valid HTML. https://stackoverflow.com/a/6393863/496046 – tremby Oct 03 '19 at 00:45

score 0 · Answer 7 · answered Aug 18 '23 at 11:28

0

In react-bootstrap this looks like

<Button
  variant="link"
  className="text-start shadow-none"
  onClick={onClick}
>
  My Button
</Button

The shadow-none gets rid of the highlighting after click. The text-start stops the text from centering.

answered Aug 18 '23 at 11:28

Noumenon

5,099
4
53
73

K.A · Answer 8 · 2022-03-18T15:32:45.993

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 .

How to make a

8 Answers8

Linked

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

8 Answers8

Linked

How to make a