You're in luck, I've read a book where the author has done this and provides a live example. The way to do it, is have the regular input in your source code, but replace the input using javascript. Here you go. http://www.beginningjavascript.com/Chapter4/exampleSubmitToLinks.html REMEMBER, DO NOT rely ONLY on javascript, have the regular input for people with JS disabled or not supported.
<input type="submit" name="submit" value="submit" style="background:none;border:0;color:#ff0000"> maybe this will help. It does not really works like a link, and you cannot add hovering actions on it, but it has lost it's background / border and it looks like just text).
The thing that is giving me the most trouble is getting the underline to show. Here's the CSS class code I've tried that doesn't show the underline even though I have this line there: text-decoration: underline; input.button { cursor: pointer; cursor: hand; background-color: transparent; text-decoration: underline; } Code (markup):
DON'T try to style your input as a link, as your button will completely not look the same cross browser-wise.
You should not try to style form buttons. They are very inconsistent in browsers, as some browsers limit what you can change and not change, etc.
Actually it is possible to style form elements consistently cross-browser. It just takes a basic understanding of their quirks and how to get around them. The biggest offender is Internet Explorer and how it chooses to ignore the specification and style fieldsets and legends its own way. Fortunately, John Faulds published an article on how to get around this (and squash a Gecko bug at the same time) around the time I decided to try it out for myself (I found the article after I tried it). http://www.tyssendesign.com.au/articles/legends-of-style/ As for inputs (including text fields, radio and check boxes, submit/reset buttons) and labels, you'll have to resort to top/bottom margins and floats (plus float clearing) to get them to work.
It's an old example (from before I started using the technique for legends that John wrote the article about), but yes, I'm sure. Bear in mind this is an OLD example, and should not be used in a production environment. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS Based Form Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> * { margin: 0; padding: 0; } body { background: #FFF; color: #000; font-family: "Times New Roman", Times, serif; padding: 1em; } h1 { font-family: Georgia, Garamond, "Times New Roman", Times, serif; margin-bottom: 0.25em; } #exampleForm { padding: 0.5em 0; } #about { float: left; margin-right: 1em; width: 28em; } #survey { float: left; width: 22em; } #controls { clear: left; } fieldset { border: 1px solid #000; display: block; margin-bottom: 0.5em; padding: 0 0 0.25em 0.5em; } #tell-us { padding-top: 0.25em; padding-bottom: 0.5em; } fieldset div { padding: 0.25em 0 0 0; } legend { background: #EEE; color: #00C; border: 1px solid #000; padding: 0 0.25em; } label { margin: 0.25em 0; } #about label { clear: left; float: left; width: 12em; } #browsers label { margin: 0; width: auto; } #browsers label:hover { background: #FFF; color: #00F; font-weight: bold; } #poll label { margin: 0; width: 10em; } #poll label:hover { background: #FFF; color: #00F; font-weight: bold; } input { margin: 0.25em 0; } #browsers input { margin: 0; vertical-align: middle; } #poll input { margin: 0 0.25em 0 0; } #submit, #reset { clear: left; float: none; margin-left: 0; width: 8em; } textarea { background: #EEE; color: inherit; display: block; margin: 0 auto; padding: 0.5em; overflow: auto; width: 90%; } </style> </head> <body> <h1>Semantic Forms with (X)HTML and CSS</h1> <form id="exampleForm" method="post" action="#"> <div id="about"> <fieldset id="basicInfo"> <legend>Basic Information</legend> <label for="name">Your Name:</label> <input id="name" type="text" size="30" /><br /> <label for="email">Your Email Address:</label> <input id="email" type="text" size="30" /> </fieldset> <fieldset id="favorites"> <legend>Favorite Things</legend> <label for="favorite-animal">What is your favorite animal?</label> <input id="favorite-animal" type="text" size="30" /><br /> <label for="favorite-sport">What is your favorite sport?</label> <input id="favorite-sport" type="text" size="30" /><br /> <label for="favorite-food">What is your favorite food?</label> <input id="favorite-food" type="text" size="30" /> </fieldset> <fieldset id="tell-us"> <legend>Tell Us About Yourself</legend> <div> <textarea rows="10" cols="40"></textarea> </div> </fieldset> </div> <div id="survey"> <fieldset id="browsers"> <legend>What browsers are installed on your computer?</legend> <div> <label for="msie"><input id="msie" type="checkbox" name="browser" value="Microsoft" /> Internet Explorer</label><br /> <label for="netscape"><input id="netscape" type="checkbox" name="browser" value="Netscape" /> Netscape Browser</label><br /> <label for="mozilla"><input id="mozilla" type="checkbox" name="browser" value="Mozilla" /> Mozilla FireFox</label><br /> <label for="opera"><input id="opera" type="checkbox" name="browser" value="Opera" /> Opera Web Browser</label><br /> <label for="konqueror"><input id="konqueror" type="checkbox" name="browser" value="Konqueror" /> Konqueror KDE</label><br /> <label for="safari"><input id="safari" type="checkbox" name="browser" value="Apple" /> Safari Web Browser</label><br /> <label for="another-browser"><input id="another-browser" type="checkbox" name="browser" value="Other" /> Something Else</label> </div> </fieldset> <fieldset id="poll"> <legend>What do you use to build your Web sites?</legend> <div> <label for="golive"><input id="golive" name="editor" type="radio" value="Adobe GoLive" /> Adobe GoLive</label><br /> <label for="dreamweaver"><input id="dreamweaver" name="editor" type="radio" value="Macromedia Dreamweaver" /> Macromedia Dreamweaver</label><br /> <label for="frontpage"><input id="frontpage" name="editor" type="radio" value="Microsoft FrontPage" /> Microsoft FrontPage</label><br /> <label for="hand"><input id="hand" name="editor" type="radio" value="A Text Editor" /> Text Editor</label><br /> <label for="other"><input id="other" name="editor" type="radio" value="Other" /> Something Else</label> </div> </fieldset> </div> <div id="controls"> <input id="submit" type="submit" value="Submit Form" /> <input id="reset" type="reset" value="Clear Form" /> </div> </form> <p> Copyright © 2006-2007, The Monster Under the Bed. All Rights To Scare Unsuspecting Children Reserved. </p> </body> </html> Code (markup):
Here you go. .submit { background: transparent; border-top: 0; border-right: 0; border-bottom: 1px solid #00F; border-left: 0; color: #00F; display: inline; margin: 0; padding: 0; } *:first-child+html .submit { /* hack needed for IE 7 */ border-bottom: 0; text-decoration: underline; } * html .submit { /* hack needed for IE 5/6 */ border-bottom: 0; text-decoration: underline; } <input class="submit" type="submit" value="Submit Form"> Code (markup): [Use the XHTML syntax ( <input /> ) only if uisng XHTML] And yes, this even works in Safari.
I had a similar problem, and I posted a solution here: http://www.venkatkoduru.com/blog/2009/10/27/styling-a-submit-input-to-look-like-a-link-using-css/
From the article: Lawlz since when did IE suddenly start supporting inherit? I had a submit I needed to style as a link about a year ago and the only problem I ran into was that Opera did not like me messing with it and refused to do cursor: pointer on the thing. Opera does too.
I know this thread is old, and i did just register to note to those who found this via google (like me) that to get the submit button to appear as text AND include the underline, display:block needs to be used.
I know this is an old post, but I follow the steps on this tutorial and I understand how to solve the set button as link -> https://tutorials.technology/tutorials/How-to-create-an-HTML-button-that-acts-like-a-link.html
Fun bounce, it's nice to see Dan's posts again... but your link has NOTHING to do with the topic of this article. In fact that article doesn't even make SENSE since they're trying to make a input look like a button, at which point use <button>. As to this topic, this is actually easier to do with a <button> tag. <button type="submit">Your Text</button> As it will behave like a normal inline element. button { overflow:visible; /* oddball IE7/earlier fix */ cursor:hand; cursor:pointer; padding:0; margin:0; border:0; text-decoration:underline; background:transparent; color:#00F; } Code (markup): There is still a minor quirk in IE7/earlier about it ignoring whitespace before it, but this isn't 2003 where we have to worry about Nyetscape 4 not supporting the <button> tag properly.