Home/ Questions/Q 6038357
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T06:12:28+00:00

I had the following code suggested to me. My question is to ask if

  • 0

I had the following code suggested to me. My question is to ask if Google will index this.

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

What are my other options? It’s important for me to retain the button widget look for the link. Previously I used the following but I was told this was not a good idea:

<a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>

I think there is another option with the button click event but I am not sure how to code that and if that will index on Google. I also use jQuery on the web page and have that as an option.

Most important however is that I have been told I must use the “button” widget so the button looks the same as others on the page.

Thanks,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could use a normal <a href> link and style it and all the <button>s to look the same with CSS:

    <!doctype html>
<style>
    button, input[type=submit], .btn {
        color: black;
        text-decoration: none;
        font-weight: normal;
        padding: 3px;
        border: 2px outset #000;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px; 
        background: rgb(232,232,232); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(229,229,229,1) 44%, rgba(204,204,204,1) 71%, rgba(216,216,216,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(44%,rgba(229,229,229,1)), color-stop(71%,rgba(204,204,204,1)), color-stop(100%,rgba(216,216,216,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(229,229,229,1) 44%,rgba(204,204,204,1) 71%,rgba(216,216,216,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(229,229,229,1) 44%,rgba(204,204,204,1) 71%,rgba(216,216,216,1) 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(229,229,229,1) 44%,rgba(204,204,204,1) 71%,rgba(216,216,216,1) 100%); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d8d8d8',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(229,229,229,1) 44%,rgba(204,204,204,1) 71%,rgba(216,216,216,1) 100%); /* W3C */
        cursor: default;
    }

    button:hover, input[type=submit]:hover, .btn:hover {
        background: #eee;
    }

    button:active, input[type=submit]:active, .btn:active {
        border: 2px inset;
    }
</style>
<form action="http://www.example.com" method="get">
<button>This is a button</button>
<a class="btn" href="http://www.example.com">This is a link</a>
<input type="submit" value="This is a submit button">
</form>

    This will make the <button>s and links with the class .btn look virtually identical. The only noticeable difference it that the outline which elements receive when they have the focus shows up inside of the “real” buttons and around the outside of the links.

    • 0