Styling an anchor tag to look like a submit button

Question

I have a form where there s a  Submit  button and a  Cancel  anchor   The HTML is this    lt input type  submit  value  Submit    gt   lt a href  some url  gt Cancel lt  a gt    I d like for the two to look and act the same   Nothing fancy  just something similar to how the  Ask Question  anchor looks on StackOverflow   I can get the two to look somewhat similar  with the bounding box  background color  and hover background color  but I can t quite get the height and vertical alignment to play nice with one another   I d post my CSS but it s such a mess at this point that I think it might be easier to just start from scratch  get a barebones CSS layout working  then move on from there   P S  I know I could use an  instead of an anchor and hook up the onClick event to do the redirect   It s almost a matter of principle at this point now to get this right using an anchor  plus there are web spider considerations to take into consideration here

User · Answer

HTML   lt a href     class  button  gt  HOME  lt  a gt    CSS   button             background-color   00CCFF           padding  8px 16px           display  inline-block           text-decoration  none           color   FFFFFF           border-radius  3px     button hover  background-color   0066FF     Watch the tutorial  https   youtu be euti4HAJJfk

User · Answer

Why not just use a button and call the url with JavaScript    lt input type  button  value  Cancel  onclick  location href  url html  return false     gt

User · Answer

Using a button tag instead of the input  resetting it and put a span inside  you ll then just have to style both the link and the span in the same way  It involve extra markup  but it worked for me   the markup    lt button type  submit  gt       lt span gt submit lt  span gt   lt  button gt   lt a gt cancel lt  a gt    the css   button type  submit         display  inline      border  none      padding  0      background  none

User · Answer

Using CSS     button       display  block      width  115px      height  25px      background   4E9CAF      padding  10px      text-align  center      border-radius  5px      color  white      font-weight  bold      lt a href  some url  class  button   gt Cancel lt  a gt

User · Answer

Links and inputs are very different things  used for very different purposes   Looks to me like you need a button for the cancel    lt button gt Cancel lt  button gt    Or maybe an input    lt input type  button  value  Cancel   gt

User · Answer

I Suggest you to use both Input Submit   Button instead of anchor and put this line of code onClick  javascript location href    http   stackoverflow com     in that Input Submit   Button which you want to work as link   Submit Example   lt input type  submit  value  Submit  onClick  javascript location href    some url      gt    Button Example   lt button type  button  onClick  javascript location href    some url      gt Submit lt  button gt

User · Answer

The best you can get with simple styles would be something like    likeabutton       text-decoration  none  font  menu      display  inline-block  padding  2px 8px      background  ButtonFace  color  ButtonText      border-style  solid  border-width  2px      border-color  ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight     likeabutton active       border-color  ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow       Possibly with some kind of fix to stop IE6-IE7 treating focused buttons as being    active       This won t necessarily look exactly like the buttons on the native desktop  though  indeed  for many desktop themes it won t be possible to reproduce the look of a button in simple CSS   However  you can ask the browser to use native rendering  which is best of all    likeabutton       appearance  button      -moz-appearance  button      -webkit-appearance  button      text-decoration  none  font  menu  color  ButtonText      display  inline-block  padding  2px 8px      Unfortunately  as you may have guessed from the browser-specific prefixes  this is a CSS3 feature that isn t suppoorted everywhere yet  In particular IE and Opera will ignore it  But if you include the other styles as backup  the browsers that do support appearance drop that property  preferring the explicit backgrounds and borders   What you might do is use the appearance styles as above by default  and do JavaScript fixups as necessary  eg     lt script type  text javascript  gt      var r  document documentElement      if     appearance  in r     MozAppearance  in r     WebkitAppearance  in r                add styles for background and border colours         if     IE6 or IE7                    add mousedown  mouseup handlers to push the button in  if you can be bothered         else                add styles for  active  button        lt  script gt

User · Answer

I hope this will help    lt a href  url  gt  lt button gt SomeText lt  button gt  lt  a gt

User · Answer

Style your change the Submit button to an anchor tag instead and submit using javascript    lt a class  link-button  href  javascript submit     gt Submit lt  a gt   lt a class  link-button  href  some url  gt Cancel lt  a gt   function submit         var form   document getElementById  form id        form submit

User · Answer

How about    lt a href  url  gt  lt input type  button  value  Cancel  gt  lt  a gt

[html] Styling an anchor tag to look like a submit button

Examples related to html

Examples related to css