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:

Answer 1

HTML

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

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

Answer 2

How about

<a href="url"><input type="button" value="Cancel"></a>

Answer 3

Why not just use a button and call the url with JavaScript?

<input type="button" value="Cancel" onclick="location.href='url.html';return false;" />

Answer 4

Using CSS:

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

<a href="some_url" class="button ">Cancel</a>

Answer 5

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:

<button type="submit">
    <span>submit</span>
</button>
<a>cancel</a>

the css:

button[type="submit"] {
    display: inline;
    border: none;
    padding: 0;
    background: none;
}

Answer 6

I hope this will help.

<a href="url"><button>SomeText</button></a>