1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS to make form input submit button look like a regular HTML a href link

Discussion in 'CSS' started by forumposters, Jul 17, 2007.

  1. #1
    Can someone please post some CSS code for this that works in both Firefox and IE?
     
    forumposters, Jul 17, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    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.
     
    soulscratch, Jul 17, 2007 IP
  3. x-noise

    x-noise Peon

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    <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).
     
    x-noise, Jul 18, 2007 IP
  4. forumposters

    forumposters Peon

    Messages:
    270
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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):
     
    forumposters, Jul 18, 2007 IP
  5. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #5
    DON'T try to style your input as a link, as your button will completely not look the same cross browser-wise.
     
    soulscratch, Jul 18, 2007 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #6
    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.
     
    soulscratch, Jul 18, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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.
     
    Dan Schulz, Jul 18, 2007 IP
  8. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #8
    http://www.456bereastreet.com/lab/form_controls/buttons/

    You sure?
     
    soulscratch, Jul 18, 2007 IP
  9. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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 &copy; 2006-2007, The Monster Under the Bed. All Rights To Scare
    	Unsuspecting Children Reserved.
    </p>
    </body>
    </html>
    
    Code (markup):
     
    Dan Schulz, Jul 18, 2007 IP
  10. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #10
    ^

    What about submit buttons as links (which this whole thread is about).
     
    soulscratch, Jul 19, 2007 IP
  11. forumposters

    forumposters Peon

    Messages:
    270
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thank you for clarifying that. Has no one an example of this?

     
    forumposters, Jul 24, 2007 IP
  12. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #12
    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.
     
    Dan Schulz, Jul 24, 2007 IP
  13. compwiz3000

    compwiz3000 Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    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/
     
    compwiz3000, Nov 5, 2009 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    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.
     
    Stomme poes, Nov 6, 2009 IP
  15. Freditpl

    Freditpl Peon

    Messages:
    28
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #15
    thanks for link and sources code. I have added to bookmarks.
     
    Freditpl, Nov 7, 2009 IP
  16. polenykes@hotmail.com

    polenykes@hotmail.com Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    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.

     
    polenykes@hotmail.com, Jun 30, 2010 IP
  17. prekocrado@

    prekocrado@ Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #17
    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
     
    prekocrado@, Nov 17, 2017 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #18
    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.
     
    deathshadow, Nov 18, 2017 IP