Styling an Anchor Tag to Look Like a Submit Button

How to make an HTML anchor tag (or link) look like a button?

Using CSS:

.button {    display: block;    width: 115px;    height: 25px;    background: #4E9CAF;    padding: 10px;    text-align: center;    border-radius: 5px;    color: white;    font-weight: bold;    line-height: 25px;}

<a class="button">Add Problem</a>

How to make button look like a link?

button {  background: none!important;  border: none;  padding: 0!important;  /*optional*/  font-family: arial, sans-serif;  /*input has OS specific font-family*/  color: #069;  text-decoration: underline;  cursor: pointer;}

<button> your button that looks like a link</button>

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

Apply this class to it

.button {  font: bold 11px Arial;  text-decoration: none;  background-color: #EEEEEE;  color: #333333;  padding: 2px 6px 2px 6px;  border-top: 1px solid #CCCCCC;  border-right: 1px solid #333333;  border-bottom: 1px solid #333333;  border-left: 1px solid #CCCCCC;}

<a href="#" class="button">Example</a>

How to style an anchor tag to look like a button with the same height as the button?

This should do it:

display: inline-block;

The reason your height isn't working is because the anchor tag marks an inline element. The height property doesn't apply to inline elements, and the vertical margin, border and padding act differently.

Firefox 2 doesn't support inline-block, if you still need to support it, but you can usually get it to work by adding a rule display:-moz-inline-box before the above line.

Alternatively, you could try using the line-height property.

Anchor tag as submit button?

I've made small changes

HTML

<form action="test.aspx" type="POST">
    <label>
        <span>Username</span>
        <input type="text" name="UserName" id="UserName" class="input-text required" />
    </label>
    <label>
        <span>Password</span>
        <input type="password" name="Password" id="Password" class="input-text required" />
    </label>
    <label>
        <input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
        <span class="checkboxlabel">Remember Me</span>
    </label>
    <div class="spacer">
        <a href="javascript:void(0)" class="login-button">Login</a>
    </div>
</form>

jquery

$(document).ready(function(){
   $(document).on("click",".login-button",function(){
     var form = $(this).closest("form");
     //console.log(form);
     form.submit();
   });
});

JSFiddle

i want a anchor should act like and input type submit button

If you want an anchor tag to act like a button just do this

<!--YOUR FORM-->
<form id="submit_this">.....</form>
<a id="fakeanchor" href="#"></a>

<script>
    $("a#fakeanchor").click(function()
    {
    $("#submit_this").submit();
    return false;
    });
</script>