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

User · Answer

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.

_x000D_

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

_x000D_

User · Answer

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

User · Answer

If you don t mind using twitter bootstrap I suggest you simply use the link class    x000D   x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 1 1 css bootstrap min css  integrity  sha384-WskhaSGFgHYWDcbwN70 dfYBj47jz9qbsMId iRN3ewGhXQFZCSftd1LZCfmhktB  crossorigin  anonymous  gt  x000D   lt button type  button  class  btn btn-link  gt Link lt  button gt  x000D   x000D   x000D    I hope this helps somebody    Have a nice day

User · Answer

I think this is very easy to do with very few lines  here is my solution  x000D   x000D   buttonToLink     background  none     border  none     color  red     buttonToLink hover     background  none     text-decoration  underline    x000D   lt button  class  buttonToLink  gt A simple link button lt  button gt  x000D   x000D   x000D

User · Answer

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     lt a href  some page php  title  perform some js action  onclick  callFunction this href  return false   gt watch and learn lt  a gt    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

User · Answer

You can achieve this using simple css as shown in below example   x000D   x000D  button   x000D      overflow  visible  x000D      width  auto  x000D    x000D  button link   x000D      font-family   Verdana  sans-serif  x000D      font-size  1em  x000D      text-align  left  x000D      color  blue  x000D      background  none  x000D      margin  0  x000D      padding  0  x000D      border  none  x000D      cursor  pointer  x000D      x000D      -moz-user-select  text  x000D    x000D         override all your button styles here if there are any others    x000D    x000D  button link span   x000D      text-decoration  underline  x000D    x000D  button link hover span  x000D  button link focus span   x000D      color  black  x000D    x000D   lt button type  submit  class  link  gt  lt span gt Button as Link lt  span gt  lt  button gt  x000D   x000D   x000D

User · Answer

x000D   x000D  button   x000D    background  none important  x000D    border  none  x000D    padding  0 important  x000D      optional   x000D    font-family  arial  sans-serif  x000D      input has OS specific font-family   x000D    color   069  x000D    text-decoration  underline  x000D    cursor  pointer  x000D    x000D   lt button gt  your button that looks like a link lt  button gt  x000D   x000D   x000D

[css] How to make button look like a link?

Examples related to css

Examples related to button

Examples related to hyperlink