How do I make an html link look like a button?

Question

I'm using ASP.NET, some of my buttons just do redirects. I'd rather they were ordinary links, but I don't want my users to notice much difference in the appearance. I considered images wrapped by anchors, i.e. tags, but I don't want to have to fire up an image editor every time I change the text on a button.

See the response I accepted for this question: http://stackoverflow.com/questions/547222/asp-net-mvc-navigation-and-user-interface-design — tvanfosson, Apr 02 '09 at 15:15
You can use a service such as [this one](http://www.cssbuttongenerator.com/) to generate the CSS for you after you configure a few aspects (color, size, font). — Basil Bourque, Dec 29 '14 at 22:04
I would answer how to do it with javascript but question has no "javascript" tag — ilyaigpetrov, Dec 04 '16 at 12:30
@ilyaigpetrov go ahead and post an answer. I asked this Q 7 years ago and it looks like it is a common problem and people have been needing a variety of solutions. — MatthewMartin, Dec 06 '16 at 00:03

score 261 · Accepted Answer · edited Jan 16 '17 at 16:11

261

Apply this class to it

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

<a href="#" class="button">Example</a>

edited Jan 16 '17 at 16:11

Flimm

136,138
45
251
267

answered Apr 02 '09 at 15:06

TStamper

30,098
10
66
73

19

The catch to this is that it requires you to reproduce the look of a button with CSS. But unfortunately buttons on different browsers and different versions of browsers look different. So you either have to accept it looking funny in some browsers, or have a bunch of code to figure out which browser and which version the user has and choose a different style. Which is a whole lot of trouble, and could break the next time a new version of a browser comes out. – Jay Dec 15 '13 at 03:23
This only works for me if I apply it to `a` tag directly (`a {display: block ...}`), which is not acceptable. Do you have any idea why `class` attribute inside `a` tag won't work? :( I'm using Firefox 27. I also tried `a.button {...}` and it doesn't work either. – just_a_girl Feb 26 '14 at 00:52
1

@Jay a compromise could be to define the styling of the `` and/or ` – Ollie Bennett Mar 14 '14 at 11:52
@OllieBennett True: You could completely redefine the look of a button. I haven't tried to do this, not sure how many aspects of the style you have to override. Sounds like a pain, but not having tried it, I can't say how much pain it is compared to other options. – Jay Mar 24 '14 at 20:02
@CraigGjerdingen I really like the styles you used for .link_button. The use of CSS3 definitely updates this answer. Also using styles that are less like the "regular" browser buttons, but still have a button affordance solves the problem of browser sniffing without (imo) having to also redefine the styles for `` – Evan Donovan Nov 28 '16 at 19:30
Having the same problem, and not liking the dull default style of submit buttons anyway, I took the CSS from the answer, made it pretty and applied it to submit buttons as well. Works for me. – Erich Kitzmueller Sep 06 '18 at 07:25
As what @Jay said earlier, different browsers look different, for my case, it shows as a button in the Chrome and it shows as a link in the Firefox. – Json Dec 27 '21 at 07:48
if you have spaces in your button text, adding `white-space: nowrap;` will prevent the "button" from being split in two near the border of the page. – Kai Carver Nov 17 '22 at 15:32

score 166 · Answer 2 · edited Dec 04 '19 at 18:59

166

Why not just wrap an anchor tag around a button element.

<a href="somepage.html"><button type="button">Text of Some Page</button></a>

This will work for IE9+, Chrome, Safari, Firefox, and probably Opera.

edited Dec 04 '19 at 18:59

Boris Verkhovskiy

14,854
11
100
103

answered Feb 25 '11 at 14:05

FarFigNewton

7,108
13
50
77

9

@Dean_Wilson try having to cater for ie6 :( – Robotnik Jun 28 '12 at 05:25
@feeel Because it was easier for me to get a consistent looking button. If you use CSS, it won't have native styling. Someone else had that answer already anyway. – FarFigNewton Jun 29 '12 at 14:39
1

I like this solution, as you don't have to fiddle with CSS trying to imitate the native browser's button style. However, in Firefox I got it working only with ` – Tobias Nov 29 '12 at 10:07
@Pyitoechito I'm sure it would since Chrome and Safari are on webkit. Looks like it will http://jsfiddle.net/9Gt7y/ – FarFigNewton Jul 18 '13 at 18:02
54

Nesting – Odin Dec 22 '13 at 22:18
I had this on a project I am currently working on and when I tested in IE11, one works(the one floating in the upper corner as a logout button) whilst the other(inside the page's main content) does not. – Logan Hasbrouck Sep 28 '15 at 15:44
I now use TSamper's answer to solve this problem for me. I would rather have the buttons look consistent across browsers; I use the [bootstrap buttons](http://getbootstrap.com/css/#buttons). – FarFigNewton Mar 30 '16 at 14:18

Raul Luna · Answer 3 · 2014-07-21T11:28:34.307

44

IMHO, there is a better and more elegant solution. If your link is this:

<a href="http://www.example.com">Click me!!!</a>

The corresponding button should be this:

<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>

This approach is simpler because it uses simple html elements, so it will work in all the browsers without changing anything. Moreover, if you have styles for your buttons, this solution will apply the same styles to your new button for free.

edited Jul 21 '14 at 11:28

answered Oct 06 '12 at 17:05

Raul Luna

1,945
1
17
26

6

Okay, I tested this out today.. and .. it works great if you are't using ASP.NET webforms. ASP.NET webforms wraps the whole page in a form tag and nested forms don't seem to function at all-- it does work outside of ASP.NET form tag, but that limits the use to links at the very top and bottom. – MatthewMartin Oct 09 '12 at 18:24
4

Simple and effective. You might want to add display:inline style to the form element. Otherwise it is treated like a block which is different from button/anchor/input. – nimrodm Mar 30 '13 at 18:35
Good question. I don't think so, either. But other solutions depicted here won't work with googlebot, for instance those of using a button tag. – Raul Luna Aug 06 '14 at 13:08
1

I tried this in Django, but as the button end up within another form, it POST the data rather than acting as a link. – wobbily_col Mar 19 '15 at 10:59
1

you could also make the button do a redirect in javascript. but now it's not a link - can't "copy link address to clipboard", middle click to open in new tab etc, preview the link target by hovering over it with the mouse etc. – Alexander Taylor Oct 17 '16 at 23:34

score 36 · Answer 4 · edited Jul 30 '17 at 16:58

36

The CSS3 appearance property provides a simple way to style any element (including an anchor) with a browser's built-in <button> styles:

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

<body>
  <a class="btn">CSS Button</a>
</body>

CSS Tricks has a nice outline with more details on this. Keep in mind that no version of Internet Explorer currently supports this according to caniuse.com.

edited Jul 30 '17 at 16:58

ReinstateMonica3167040

732
9
27

answered Feb 26 '16 at 17:07

Kevinleary.net

8,851
3
54
46

13

This was dropped from the CSS3 spec. https://www.htmlvalidator.com/help.php?m=1&h=appearance – user1431356 May 08 '18 at 23:37

score 27 · Answer 5 · edited Jan 16 '17 at 16:13

27

If you want nice button with rounded corners, then use this class:

.link_button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    background: #4479BA;
    color: #FFF;
    padding: 8px 12px;
    text-decoration: none;
}

<a href="#" class="link_button">Example</a>

edited Jan 16 '17 at 16:13

Flimm

136,138
45
251
267

answered Dec 03 '13 at 09:40

rupsray

471
5
5

3

I added this and the highest rank answer to a jsFiddle. Feel free to mess around with http://jsfiddle.net/5z6ew1m0/6 – Craig Gjerdingen Sep 05 '14 at 19:45
You may want to add a `margin` to it too. Otherwise, good job styling it. – c00000fd Oct 09 '17 at 07:21

score 23 · Answer 6 · answered Apr 02 '09 at 15:06

a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

You can play with <a> tags like this if you give them a block display. You can adjust the border to give a shade like effect and the background color for that button feel :)

score 3 · Answer 7 · answered Sep 11 '13 at 05:26

As TStamper said, you can just apply the CSS class to it and design it that way. As CSS improves the number of things that you can do with links has become extraordinary, and there are design groups now that just focus on creating amazing-looking CSS buttons for themes, and so forth.

For example, you can transitions with background-color using the -webkit-transition property and pseduo-classes. Some of these designs can get quite nutty, but it's providing a fantastic alternative to what might in the past have had to have been done with, say, flash.

For example (these are mind-blowing in my opinion), http://tympanus.net/Development/CreativeButtons/ (this is a series of totally out-of-the-box animations for buttons, with source code on the originating page). http://www.commentredirect.com/make-awesome-flat-buttons-css/ (along the same lines, these buttons have nice but minimalistic transition effects, and they make use of the new "flat" design style.)

ilyaigpetrov · Answer 8 · 2017-02-01T13:58:48.553

You may do it with JavaScript:

Get CSS styles of real button with getComputedStyle(realButton).
Apply the styles to all your links.

/* javascript, after body is loaded */
'use strict';

{ // Namespace starts (to avoid polluting root namespace).
  
  const btnCssText = window.getComputedStyle(
    document.querySelector('.used-for-btn-css-class')
  ).cssText;
  document.querySelectorAll('.btn').forEach(
    (btn) => {
      
      const _d = btn.style.display; // Hidden buttons should stay hidden.
      btn.style.cssText = btnCssText;
      btn.style.display = _d;
      
    }
  );
  
} // Namespace ends.

<body>
  <h3>Button Styled Links</h3>
  <button class="used-for-btn-css-class" style="display: none"></button>
  <a href="//github.io" class="btn">first</a>
  <a href="//github.io" class="btn">second</a>
  <button>real button</button>
  <script>/* You may put JS here. */</script>
</body>

score 3 · Answer 9 · answered Jun 29 '21 at 13:43

3

HTML

<a class="btn">Button</a>

CSS

  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;

answered Jun 29 '21 at 13:43

MD SHAYON

7,001
45
38

score 2 · Answer 10 · edited Jul 30 '17 at 07:12

2

How about using asp:LinkButton?

You can do that - I made a linkbutton look like a standard button, using TStamper's entry. Underlining showed under the text when I hovered, though, in spite of the text-decoration: none setting.

I was able to stop the hover-underlining by adding style="text-decoration: none" within the linkbutton:

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>

edited Jul 30 '17 at 07:12

answered Feb 28 '13 at 15:52

Christian

51
5

Linkbutton creates something that looks like a link but acts like a button. The question asks for the opposite: something that looks like a button but acts like a link. – Jay Dec 15 '13 at 03:21

score 2 · Answer 11 · answered Mar 14 '14 at 13:51

Much belated answer:

I've been wrestling with this on and off since I first started working in ASP. Here's the best I've come up with:

Concept: I create a custom control that has a tag. Then in the button I put an onclick event that sets document.location to the desired value with JavaScript.

I called the control ButtonLink, so that I could easily get if confused with LinkButton.

aspx:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %>

<asp:Button runat="server" ID="button"/>

code behind:

Partial Class controls_ButtonLink
Inherits System.Web.UI.UserControl

Dim _url As String
Dim _confirm As String

Public Property NavigateUrl As String
    Get
        Return _url
    End Get
    Set(value As String)
        _url = value
        BuildJs()
    End Set
End Property
Public Property confirm As String
    Get
        Return _confirm
    End Get
    Set(value As String)
        _confirm = value
        BuildJs()
    End Set
End Property
Public Property Text As String
    Get
        Return button.Text
    End Get
    Set(value As String)
        button.Text = value
    End Set
End Property
Public Property enabled As Boolean
    Get
        Return button.Enabled
    End Get
    Set(value As Boolean)
        button.Enabled = value
    End Set
End Property
Public Property CssClass As String
    Get
        Return button.CssClass
    End Get
    Set(value As String)
        button.CssClass = value
    End Set
End Property

Sub BuildJs()
    ' This is a little kludgey in that if the user gives a url and a confirm message, we'll build the onclick string twice.
    ' But it's not that big a deal.
    If String.IsNullOrEmpty(_url) Then
        button.OnClientClick = Nothing
    ElseIf String.IsNullOrEmpty(_confirm) Then
        button.OnClientClick = String.Format("document.location='{0}';return false;", ResolveClientUrl(_url))
    Else
        button.OnClientClick = String.Format("if (confirm('{0}')) {{document.location='{1}';}} return false;", _confirm, ResolveClientUrl(_url))
    End If
End Sub
End Class

Advantages of this scheme: It looks like a control. You write a single tag for it, <ButtonLink id="mybutton" navigateurl="blahblah"/>

The resulting button is a "real" HTML button and so looks just like a real button. You don't have to try to simulate the look of a button with CSS and then struggle with different looks on different browsers.

While the abilities are limited, you can easily extend it by adding more properties. It's likely that most properties would just have to "pass thru" to the underlying button, like I did for text, enabled and cssclass.

If anybody's got a simpler, cleaner or otherwise better solution, I'd be happy to hear it. This is a pain, but it works.

Andrew Howden · Answer 12 · 2014-08-22T05:58:14.953

This is what I used. Link button is

<div class="link-button"><a href="/">Example</a></div>

CSS

/* body is sans-serif */ 

.link-button {
    margin-top:15px;
    max-width:90px;
    background-color:#eee;
    border-color:#888888;
    color:#333;
    display:inline-block;
    vertical-align:middle;
    text-align:center;
    text-decoration:none;
    align-items:flex-start;
    cursor:default;
    -webkit-appearence: push-button;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    font-size: 1em;
    font-family: inherit;
    border-color: #000;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    min-height: 30px;
}

.link-button a {
    margin-top:4px;
    display:inline-block;
    text-decoration:none;
    color:#333;
}

.link-button:hover {
    background-color:#888;
}

.link-button:active {
    background-color:#333;
}

.link-button:hover a, .link-button:active a {
    color:#fff;
}

It doesn't look much like a button though. I don't know who downvoted you. Here is the JS fiddle for the code you provided: http://jsfiddle.net/yajj2x0p/ — MatthewMartin, Aug 21 '14 at 03:22

score 2 · Answer 13 · edited Apr 24 '20 at 00:40

Use this class. It will make your link look the same as a button when applied using the button class on an a tag.

or

HERE IS ANOTHER DEMO JSFIDDLE

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    border: solid 1px #da7c0c;
    background: #478dad;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .3em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
    position: relative;
    top: 1px;
}

score 2 · Answer 14 · answered Apr 16 '19 at 13:41

By using border, color and background color properties you can create a button lookalike html link!

a {
background-color: white;
color: black;
padding: 5px;
text-decoration: none;
border: 1px solid black;
}
a:hover {
background-color: black;
color: white;

}

<a href="https://stackoverflow.com/

">Open StackOverflow</a>

Hope this helps :]

score 2 · Answer 15 · answered Apr 02 '09 at 15:09

You could create a standard button, then use it as the background image for a link. Then you can set the text in the link without changing the image.

The best solutions if you don't a special rendered button are the two already given by TStamper and Ólafur Waage.

score 2 · Answer 16 · answered Apr 02 '09 at 15:10

2

This gets into the details of the css a bit more too, and gives you some images:

http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/

answered Apr 02 '09 at 15:10

GBa

17,509
15
49
67

score 0 · Answer 17 · edited Jul 30 '17 at 14:49

0

I use an asp:Button:

<asp:Button runat="server"
            OnClientClick="return location='targetPage', true;"
            UseSubmitBehavior="False"
            Text="Button Text Here"
/>

This way, the operation of the button is completely client-side and the button acts just like a link to the targetPage.

edited Jul 30 '17 at 14:49

ReinstateMonica3167040

732
9
27

answered Apr 27 '14 at 17:37

Manus Hand

9
2

Good job showing what an `asp:Button` looks like in practice, so it can help other users! – ReinstateMonica3167040 Jul 30 '17 at 14:08

score 0 · Answer 18 · answered Feb 28 '17 at 18:23

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

<a href="#" class="button">Example</a>

score 0 · Answer 19 · answered Apr 05 '19 at 13:39

Use below snippet.

    .a{
  color: $brn-acc-clr;
  background-color: transparent;
  border-color: #888888;

  &:hover:active{
    outline: none;
    color: #888888;
    border-color: #888888;
  }
  &:fill{
    background-color: #888888;
    color: #fff;
    box-shadow: 0 3px 10px rgba(#888888, 0.5);
    &:hover:active{
      color: #fff;
    }
    &:hover:not(:disabled){
      transform: translateY(-2px);
      background-color: darken(#888888, 4);
    }
  }
}

score 0 · Answer 20 · answered Apr 16 '19 at 14:12

Simple button css now you can play around with your editor

a {
  display: inline-block;
  background: #000000c9;
  color: #000;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}
a:hover {
  background:#000
  cursor: pointer;
  transition: 0.3s ease-in;
}

Link tag

<a href="#">Hover me<a>

score 0 · Answer 21 · answered Sep 13 '20 at 01:35

If you need some cool effect, hover and shadow; you can use this:

    .button {
        text-decoration: none;
        padding: 15px 25px;
        font-size: 24px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        outline: none;
        color: #fff;
        background-color: #450775;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #e1d5ed;

    }

    .button:hover {background-color: #220440}

    .button:active {
        background-color: #230545;
        box-shadow: 0 5px #e1d5ed;
        transform: translateY(4px);
    }

At first I thought this wasn't an answer. Then I realized Emeka must mean that the link should have the "button" class on it. — LarsH, Feb 08 '21 at 20:47

score -1 · Answer 22 · answered Jul 10 '14 at 18:43

This worked for me. It looks like a button and behaves like a link. You can bookmark it for example.

<a href="mypage.aspx?param1=1" style="text-decoration:none;">
    <asp:Button PostBackUrl="mypage.aspx?param1=1" Text="my button-like link" runat="server" />
</a>

score -2 · Answer 23 · edited Jul 30 '17 at 17:35

-2

How about using asp:LinkButton?

edited Jul 30 '17 at 17:35

ReinstateMonica3167040

732
9
27

answered Aug 01 '11 at 09:12

Vladimir Kocjancic

1,814
3
22
34

Link button, despite the name, looks exactly like a link. http://www.w3schools.com/aspnet/showasp.asp?filename=demo_linkbutton – MatthewMartin Aug 02 '11 at 21:06

How do I make an html link look like a button?

23 Answers23

Linked

Related