How to Make Button Look Like a Link

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 do I create an HTML button that acts like a link?

HTML

The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute.

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

If necessary, set CSS display: inline; on the form to keep it in the flow with the surrounding text. Instead of <input type="submit"> in above example, you can also use <button type="submit">. The only difference is that the <button> element allows children.

You'd intuitively expect to be able to use <button href="https://google.com"> analogous with the <a> element, but unfortunately no, this attribute does not exist according to HTML specification.

CSS

If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property (it's only not supported in Internet Explorer).

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

<a href="https://google.com" class="button">Go to Google</a>

Creating a Link to Look Like a Button

Just change display: block under .g2b-button to display: inline-block. This is because anchor tags (<a>) are treated different by the browser than button tags (<button>).

Making a button that's a link in HTML

<a href="#"><button>Link Text</button></a>

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:

<a href="http://stackoverflow.com"><button>Link Text</button></a>

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>

Button as a Link

Both are invalid. HTML does not allow links to contain buttons or vice versa.

The error handling routines in browsers are just different for the two cases.

If you want a link that looks like a button then use a link and apply CSS.

How to put a link on a button with bootstrap?

You can call a function on click event of button.

<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">

<script>
function relocate_home()
{
     location.href = "www.yoursite.com";
} 
</script>

OR
Use this Code

<a href="#link" class="btn btn-info" role="button">Link Button</a>

How to Make Button Look Like a Link