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

User · Answer

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

User · Answer

Apply this class to it   x000D   x000D   button   x000D    font  bold 11px Arial  x000D    text-decoration  none  x000D    background-color   EEEEEE  x000D    color   333333  x000D    padding  2px 6px 2px 6px  x000D    border-top  1px solid  CCCCCC  x000D    border-right  1px solid  333333  x000D    border-bottom  1px solid  333333  x000D    border-left  1px solid  CCCCCC  x000D    x000D   lt a href     class  button  gt Example lt  a gt  x000D   x000D   x000D

User · Answer

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    lt    Control Language  VB  AutoEventWireup  false  CodeFile  ButtonLink ascx vb  Inherits  controls ButtonLink    gt    lt asp Button runat  server  ID  button   gt    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   lt ButtonLink id  mybutton  navigateurl  blahblah   gt   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

User · Answer

By using border  color and background color properties you can create a button lookalike html link    x000D   x000D  a   x000D  background-color  white  x000D  color  black  x000D  padding  5px  x000D  text-decoration  none  x000D  border  1px solid black  x000D    x000D  a hover   x000D  background-color  black  x000D  color  white  x000D   x000D    x000D   lt a href  https   stackoverflow com  x000D   x000D    gt Open StackOverflow lt  a gt  x000D   x000D   x000D    Hope this helps

User · Answer

IMHO  there is a better and more elegant solution  If your link is this     lt a href  http   www example com  gt Click me    lt  a gt    The corresponding button should be this     lt form method  GET  action  http   www example com  gt   lt input type  submit  value  Click me     gt   lt  form gt    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

User · Answer

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

User · Answer

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    lt asp LinkButton  id  btnUpdate   CssClass  btnStyleTStamper   style  text-decoration  none   Text  Update Items     Onclick  UpdateGrid    runat  server    gt

User · Answer

x000D   x000D   button   x000D    font  bold 11px Arial  x000D    text-decoration  none  x000D    background-color   EEEEEE  x000D    color   333333  x000D    padding  2px 6px 2px 6px  x000D    border-top  1px solid  CCCCCC  x000D    border-right  1px solid  333333  x000D    border-bottom  1px solid  333333  x000D    border-left  1px solid  CCCCCC  x000D    x000D   lt a href     class  button  gt Example lt  a gt  x000D   x000D   x000D

User · Answer

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

User · Answer

The CSS3 appearance property provides a simple way to style any element  including an anchor  with a browser s built-in  lt button gt  styles    x000D   x000D  a btn   x000D    -webkit-appearance  button  x000D    -moz-appearance  button  x000D    appearance  button  x000D    x000D   lt body gt  x000D     lt a class  btn  gt CSS Button lt  a gt  x000D   lt  body gt  x000D   x000D   x000D    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

User · Answer

You may do it with JavaScript    Get CSS styles of real button with getComputedStyle realButton   Apply the styles to all your links     x000D   x000D     javascript  after body is loaded    x000D   use strict   x000D   x000D       Namespace starts  to avoid polluting root namespace   x000D     x000D    const btnCssText   window getComputedStyle  x000D      document querySelector   used-for-btn-css-class   x000D      cssText  x000D    document querySelectorAll   btn   forEach  x000D       btn    gt    x000D         x000D        const  d   btn style display     Hidden buttons should stay hidden  x000D        btn style cssText   btnCssText  x000D        btn style display    d  x000D         x000D        x000D       x000D     x000D       Namespace ends  x000D   lt body gt  x000D     lt h3 gt Button Styled Links lt  h3 gt  x000D     lt button class  used-for-btn-css-class  style  display  none  gt  lt  button gt  x000D     lt a href    github io  class  btn  gt first lt  a gt  x000D     lt a href    github io  class  btn  gt second lt  a gt  x000D     lt button gt real button lt  button gt  x000D     lt script gt    You may put JS here     lt  script gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Use below snippet        a    color   brn-acc-clr    background-color  transparent    border-color   888888      amp  hover active      outline  none      color   888888      border-color   888888         amp  fill      background-color   888888      color   fff      box-shadow  0 3px 10px rgba  888888  0 5        amp  hover active        color   fff             amp  hover not  disabled         transform  translateY -2px         background-color  darken  888888  4

User · Answer

a       display  block      height  20px      width  auto      border  1px solid  000      You can play with  lt a gt  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

User · Answer

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   lt a href     gt Hover me lt a gt

User · Answer

This worked for me  It looks like a button and behaves like a link  You can bookmark it for example    lt a href  mypage aspx param1 1  style  text-decoration none   gt       lt asp Button PostBackUrl  mypage aspx param1 1  Text  my button-like link  runat  server    gt   lt  a gt

User · Answer

I use an asp Button    lt asp Button runat  server              OnClientClick  return location  targetPage   true               UseSubmitBehavior  False              Text  Button Text Here    gt    This way  the operation of the button is completely client-side and the button acts just like a link to the targetPage

User · Answer

Why not just wrap an anchor tag around a button element    lt a href  somepage html  gt  lt button type  button  gt Text of Some Page lt  button gt  lt  a gt    This will work for IE9   Chrome  Safari  Firefox  and probably Opera

User · Answer

If you want nice button with rounded corners  then use this class    x000D   x000D   link button   x000D      -webkit-border-radius  4px  x000D      -moz-border-radius  4px  x000D      border-radius  4px  x000D      border  solid 1px  20538D  x000D      text-shadow  0 -1px 0 rgba 0  0  0  0 4   x000D      -webkit-box-shadow  inset 0 1px 0 rgba 255  255  255  0 4   0 1px 1px rgba 0  0  0  0 2   x000D      -moz-box-shadow  inset 0 1px 0 rgba 255  255  255  0 4   0 1px 1px rgba 0  0  0  0 2   x000D      box-shadow  inset 0 1px 0 rgba 255  255  255  0 4   0 1px 1px rgba 0  0  0  0 2   x000D      background   4479BA  x000D      color   FFF  x000D      padding  8px 12px  x000D      text-decoration  none  x000D    x000D   lt a href     class  link button  gt Example lt  a gt  x000D   x000D   x000D

User · Answer

This is what I used  Link button is    lt div class  link-button  gt  lt a href     gt Example lt  a gt  lt  div gt    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

User · Answer

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

User · Answer

How about using asp LinkButton

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

Examples related to css