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;
}