Making a button that s a link in HTML

Question

Basically  I like the way that  lt input type  submit  gt  is styled  with the clickable button when you add a little CSS  However  regular buttons are not styled as such  they have no such clickability without some major CSS or JS  and you have to use images   I made submit buttons into links  by using the form action  but this requires me to make a new form for each button  How can I find a happy medium  Using multiple forms is causing problems in my styling that I can t seem to fix unless I find another way to make buttons that are links in HTML  that have a default style that makes them have a pressed state  and I don t mean browser default settings     Any ideas

User · Answer

You have three options    Style links to look like buttons using CSS   Just look at the light blue  tags  under your question   It is possible  even to give them a depressed appearance when clicked  using pseudo-classes like  active   without any scripting   Lots of major sites  such as Google  are starting to make buttons out of CSS styles these days anyway  scripting or not  Put a separate  lt form  element around each one   As you mentioned in the question   Easy and will definitely work without Javascript  or even CSS    But it adds a little extra code which may look untidy  Rely on Javascript   Which is what you said you didn t want to do

User · Answer

x000D   x000D   lt a id  reset-authenticator  asp-page    ResetAuthenticator  gt  lt input type  button  class  btn btn-primary  value  Reset app    gt  lt  a gt  x000D   x000D   x000D

User · Answer

A little bit easier and it looks exactly like the button in the form  Just use the input and wrap the anchor tag around it    lt a href     gt  lt input type  button  value  Button Text  gt  lt  a gt

User · Answer

The 3 easiest ways IMHO are   1  you create an image of a button and put a href around it   Not a good way  you lose flexibility and will provide a lot of difficulties and problems    2  The easiest one  -  JQuery    lt input type  submit  someattribute  http   yoururl index php  gt        button type submit   default   click function         window location     this  attr  someattribute         return false    otherwise it will send a button submit to the server             3  also easy but I prefer previous one     lt INPUT TYPE BUTTON OnClick  somefunction  http   yoururl   return false  VALUE  somevalue  gt    fn somefunction  function url        window location   url

User · Answer

Use javascript    lt button onclick  window location href   css page html   gt CSS page lt  button gt    You can always style the button in css anyaways  Hope it helped   Good luck

User · Answer

lt a href     gt  lt button gt Link Text lt  button gt  lt  a gt    You asked for a link that looks like a button  so use a link and a button  -  This will preserve default browser button styling  The button by itself does nothing  but clicking it activates its parent link   Demo   x000D   x000D   lt a href  http   stackoverflow com  gt  lt button gt Link Text lt  button gt  lt  a gt  x000D   x000D   x000D

User · Answer

IMPORTANT   lt button gt  should never be a descendent of  lt a gt     Try  lt a href  http   stackoverflow com  gt  lt button gt Link Text lt  button gt  lt  a gt  in any html validator like https   validator w3 org and you ll get an error  There s really no point in using a button if you re not using the button  Just style the  lt a gt  with css to look like a button  If you re using a framework like Bootstrap  you could apply the button style s  btn  btn-primary etc   jsfiddle   button styled link   x000D   x000D   btnStack   x000D    font-family  Oswald  x000D    background-color  orange  x000D    color  white  x000D    text-decoration  none  x000D    display  inline-block  x000D    padding  6px 12px  x000D    margin-bottom  0  x000D    font-size  14px  x000D    font-weight  normal  x000D    line-height  1 428571429  x000D    text-align  center  x000D    white-space  nowrap  x000D    vertical-align  middle  x000D    cursor  pointer  x000D    border  1px solid transparent  x000D    border-radius  4px  x000D    -webkit-user-select  none  x000D    -moz-user-select  none  x000D    -ms-user-select  none  x000D    -o-user-select  none  x000D    user-select  none  x000D    x000D   x000D  a btnStack hover   x000D    background-color   000  x000D    x000D   lt link href  https   fonts googleapis com css family Oswald 400  rel  stylesheet  type  text css  gt  x000D   lt a href  http   stackoverflow com  class  btnStack  gt stackoverflow com lt  a gt  x000D   x000D   x000D

[html] Making a <button> that's a link in HTML

Examples related to html

Examples related to css

Examples related to button