How to make button look like a link?

Question

I need to make a button look like a link using CSS. The changes are done but when I click on it, it shows as if it's pushed as in a button. Any idea how to remove that, so that the button works as a link even when clicked?

Maitland

cletus: rather “why not use a link” ;) – Illsorted

Dare I ask why not just use a link? – Antrim

Using a button is easier as the onclick event is easier to use than the navigateURL to trigger JS functions. – Maitland

onclick events on links are as simple as on buttons – Illsorted

@knittl, @Antrim Actually, links and buttons have very different meanings in HTML. You should read whatwg.org/specs/web-apps/current-work/multipage/…. It may be not a good idea to style button to look like link, but it depends on UI design, while using link instead is against HTML specs. – Jacquiline

There are a few reasons why styling a button like a link may be necessary. (1) button has type="submit" (2) button has fancy styling ie background image with variable length – Princely

It also may be more semantically correct for something to be a button, even if you want it to look like a link. For example imagine a pair of "Expand All | Collapse All" links that change something on the page. Clicking these causes an action, but doesn't take the user anywhere - the semantics are those of a button. However the designer may have specfied links for appearance reasons. So this is actually a very good question. – Kilderkin

I'm using a button instead of a link because triggering JS methods with a link, I'm forced to link to # then use event.preventDefault(). That's nasty, as is linking to javascript:void(0);. – Lucerne

@Illsorted links should not be used for delete action for example – Ferdelance

Using a button allows you to issue a POST request, which is spec-defined to be non-idempotent. – Phonologist

"I'm forced to link to #" --- Really ... by whom? Unless you have some JS that's enforcing a policy you can do: onclick="foo();return false;" – Moratorium

Styling a button as a link is an easy way to get a menu item which looks and behaves like <a>text</a> but is actually <form><input value="text"></form>, so it GETs or POSTs data. – Gallenz

Answer 1

button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}

<button> your button that looks like a link</button>

Vestiary

My very slight variation on the fiddle - moved the text-decoration:underline rule to act on button:hover. see in my forked fiddle. – Luncheon

If you don't want all buttons to be styled as links, scope the style with something like button.link {...styles...} then <button class="link">Your button</button>. This also avoids using !important which is always a good idea. – Lucerne

border-bottom is a bit of a hack for making it looked underlined. This answer is otherwise a good start, but the second answer here is really more thorough and has the right solution for underlining. – Semblance

Don't forget font: inherit; most browsers use their own font for buttons. – Tenebrific

Expanding on @SiliconMind's comment, to better simulate a link, you could include something like: button:active, button:focus { outline: none; }. This will get rid of the outline that browsers tend to place around the button while your mouse click is held down (active), and released (focused). – Rocketeer

Please do not remove the outline as that would make your button inaccessible: outlinenone.com – Sepulchre

... and add outline:none. – Nahshon

Don't use !important, it is evil. Ther isn't even a need for it. – Familiarize

From my experience trying this, it seems to be out of date on the latest browsers. There's better answers below. – Papotto

Answer 2

If you don't mind using twitter bootstrap I suggest you simply use the link class.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>

Nogas

This worked great but left some padding as opposed to a real <a> link. Simply add a style of padding:0 !important and it's golden. Thanks! – Kindle

This seems to trigger a form validation with jquery validate – Humblebee

This is not a reliable solution. Not only does it subtly break the vertical centering, but it implicitly disables text styling and font size changes. – Unsuccessful

Instead of adding style of padding:0, you can use the p-0 class. For fixing the vertical centering, use the align-baseline class. – Madalene

Answer 3

The code of the accepted answer works for most cases, but to get a button that really behaves like a link you need a bit more code. It is especially tricky to get the styling of focused buttons right on Firefox (Mozilla).

The following CSS ensures that anchors and buttons have the same CSS properties and behave the same on all common browsers:

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238); 
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */

@supports (-moz-appearance:none) { /* Mozilla-only */
  button::-moz-focus-inner { /* reset any predefined properties */ 
    border: none;
    padding: 0;
  }
  button:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}

The example above only modifies button elements to improve readability, but it can easily be extended to modify input[type="button"], input[type="submit"] and input[type="reset"] elements as well. You could also use a class, if you want to make only certain buttons look like anchors.

See this JSFiddle for a live-demo.

Please also note that this applies the default anchor-styling to buttons (e.g. blue text-color). So if you want to change the text-color or anything else of anchors & buttons, you should do this after the CSS above.

---

The original code (see snippet) in this answer was completely different and incomplete.

/* Obsolete code! Please use the code of the updated answer. */

input[type="button"], input[type="button"]:focus, input[type="button"]:active,  
button, button:focus, button:active {
	/* Remove all decorations to look like normal text */
	background: none;
	border: none;
	display: inline;
	font: inherit;
	margin: 0;
	padding: 0;
	outline: none;
	outline-offset: 0;
	/* Additional styles to look like a link */
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
    border: none;
    padding: 0;
}

Northrop

Why do you need outline-offset: 0; if outline is set to none? – Pearse

I had to add box-shadow: none to clear all styling on the button – Soonsooner

Another one: text-transform: none; – Antisocial

Answer 4

try using the css pseudoclass :focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

edit as for links and onclick events use (you shouldn’t use inline javascript eventhandlers, but for the sake of simplicity i will use them here):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

with this.href you can even access the target of the link in your function. return false will just prevent browsers from following the link when clicked.

if javascript is disabled the link will work as a normal link and just load some/page.php—if you want your link to be dead when js is disabled use href="#"

Illsorted

i would use it but am not very sure as to what changes to apply so that the button doesn't get indented. – Maitland

yeah. N even after giving the paddina as 0 the indentation still remains – Maitland

Answer 5

I think this is very easy to do with very few lines. here is my solution

.buttonToLink{
   background: none;
   border: none;
   color: red
}

.buttonToLink:hover{
   background: none;
   text-decoration: underline;
}

<button  class="buttonToLink">A simple link button</button>

Ammann

Answer 6

You can't style buttons as links reliably throughout browsers. I've tried it, but there's always some weird padding, margin or font issues in some browser. Either live with letting the button look like a button, or use onClick and preventDefault on a link.

Rookery

That was true back when browsers used native widgets. Is it still true of any even remotely recent browsers? – Dudeen

It's 2017 and my FireFox still uses native widgets. – Waggoner

Answer 7

You can achieve this using simple css as shown in below example

button {
    overflow: visible;
    width: auto;
}
button.link {
    font-family: "Verdana" sans-serif;
    font-size: 1em;
    text-align: left;
    color: blue;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
   
    -moz-user-select: text;
 
    /* override all your button styles here if there are any others */
}
button.link span {
    text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
    color: black;
}

<button type="submit" class="link"><span>Button as Link</span></button>

Rawlins

Answer 8

 button {
  text-decoration: underline;
  cursor: pointer;
  }

 <button onClick="javascript:window.location.href='link'">Domain</button>

Aquarist