/    Sign up×
Community /Pin to ProfileBookmark

How to Create Text Submit Button

Hi there, we are trying to create a submit button but dont want the gray button type or image, we only want text.

Example: <input name=”Submit” type=”submit” value=”Submit”>. This gives the gray looking button.

We only want a text version of this, something similar to a text link.

Anyone know how to do this?

Cheers
Mal

to post a comment
HTML

5 Comments(s)

Copy linkTweet thisAlerts:
@felgallApr 07.2008 — Only if JavaScript is enabled. Then you can just use

<span onclick="document.myform.submit()">Submit MyForm</span>

For when JavaScript is not available you need the submit button as that is the only way HTML provides for submitting a form.
Copy linkTweet thisAlerts:
@malhypauthorApr 07.2008 — Thanks for the reply.

I thought so.
Copy linkTweet thisAlerts:
@FangApr 07.2008 — Or CSS&lt;input style="vertical-align:bottom;overflow:visible; font-size:1em; display:inline; margin:0; padding:0; border:0; border-bottom:1px solid blue; color:blue; cursor:pointer;" name="Submit" type="submit" value="Submit"&gt;
Copy linkTweet thisAlerts:
@NogDogApr 07.2008 — [EDIT]Fang beat me to the punch, again. :p [/EDIT]

A simple way to do it with no JavaScript required:

HTML page, in your <form>:
<i>
</i>&lt;input type="submit" value="Click to enter" [color=red]class="text_button"[/color]&gt;

In your stylesheet or <style> block:
<i>
</i>.text_button {
border: none;
background-color: transparent;
padding: 0;
text-decoration: underline; /* if desired */
color: #00c; /* or whatever other color you want */
}
Copy linkTweet thisAlerts:
@FangApr 07.2008 — @ [B]NogDog[/B] I think you will find that [I]overflow:visible; font-size:1em;[/I] are necessary.

[I]overflow:visible;[/I] removes the white-space either side of the text in IE (works on normal buttons too)
×

Success!

Help @malhyp spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...