CODEWITHSUNDEEP
htmlcssbutton
Vahan
Vahan

Reputation: 3268

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 keep the <button> properties.

Upvotes: 14

Views: 65751

Answers (2)

sdleihssirhc
sdleihssirhc

Reputation: 42496

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.

Upvotes: 35

Ryuhinata
Ryuhinata

Reputation: 66

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

Upvotes: 3

Related Questions