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

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

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

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

_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

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

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

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

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

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  amp  buttons  you should do this after the CSS above     The original code  see snippet  in this answer was completely different and incomplete    x000D   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   x000D   x000D

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

Examples related to css

Examples related to button

Examples related to hyperlink