How to create a text only button?

How can I create a button that only shows the text. Similar to an hyperlink but it has to k开发者_JAVA技巧eep the <button> properties.

---

Assuming you're starting with a button element:

<button class="astext">hello, world</button>

All you have to do is take away all of the default CSS styling:

.astext {
    background:none;
    border:none;
    margin:0;
    padding:0;
    cursor: pointer;
}

Of course, there's no way to tell that the resulting text is actually a button. I suppose you could throw in a cursor:pointer or some :hover rules.

Maybe you're making an easter egg, maybe you don't want people to know it can be clicked.

---

Maybe you can check this JSFiddle code to see how it works. The suggested solution works wonder.

Html

<button class = "asText" id = "doSmth"> Hello World </button>
<div id="hiddenText">i'm well hidden</div>

CSS

.asText {
background:none;
border:none;
margin:0;
padding:0;
}