How can I improve the looks of this "Save" button? It's pretty boring. What code do I add to change it's appearance? Thanks. <tr> <td colspan='2' align='left'><input type='submit' value = 'Save'></td> </tr> Code (markup):
First of all, don't use improperly formatted table row instead of a label, a tag intended to be used with your inputs (by containing them, for instance, but it's not a must). A fieldset should be included too. To style it, use CSS. You can do whatever comes to your mind, but note that the style applied is likely not to be understood by old IEs. Now I could go a whole hour about separating presentation from content and NOT using the deprecated align attribute in the, but I won't do it this time.
just add a class ex: <input class='btn' type='submit' and improve in the srylesheet examp; a.btn { background: transparent url('bg_button_a.gif') no-repeat scroll top right; color: #444; display: block; float: left; font: normal 12px arial, sans-serif; height: 24px; margin-right: 6px; padding-right: 18px; /* sliding doors padding */ text-decoration: none; } a.btn span { background: transparent url('bg_button_span.gif') no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px; } that was an example you can find more button styles here http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/ for the css div and class read this http://www.w3schools.com/css/css_id_class.asp
if you want the button to look even more "alive" add a btn a.hover{ */ and then style it a bit so that when you hove over it, it does something */ }
Why the **** would one add an ANCHOR to it? Is it an anchor? No, it's an input -- and it's not like in modern browsers you can't set :hover on an input. Neither your nor albcoder's responses are 'helpful' since they are using the wrong TAG. (and if you say "but you can replace the submit with an anchor and javascript" here, have a double helping of sierra tango foxtrot uniform!) Rukbat is right, get it OUT of the table... but it's a submit so it doesn't need or should have a label... and use the PROPER quotes for HTML -- if the singles are being caused by your using doubles server side, STOP using doubles server-side! <input type="submit" value="Save" class="submit" /> as to styling, anything you can do to any other element with CSS you can do to that input. For example: .submit { color:#FFF; background:#666; box-shadow: inset 0.2em 0.2em 0.4em #AAA, inset -0.2em -0.2em 0.4em #333, 2px 2px 4px #666; border:2px solid #F00; border-radius:0.5em; } .submit:hover { background:#888; } Code (markup):
Use below css for the nice looking button. .button { border-top: 1px solid #EEE; background: #666; padding: 3.5px 7px; -webkit-border-radius: 39px; -moz-border-radius: 39px; border-radius: 39px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; color: white; font-size: 15px; font-family: verdana, serif; text-decoration: none; vertical-align: middle; } Code (markup):