How can I improve the looks of this "Save" button?

Discussion in 'HTML & Website Design' started by chrisj, Mar 8, 2013.

  1. #1
    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):

     
    chrisj, Mar 8, 2013 IP
  2. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #2
    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.
     
    wiicker95, Mar 8, 2013 IP
  3. AlbCoder

    AlbCoder Well-Known Member

    Messages:
    126
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    163
    #3
    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
     
    AlbCoder, Mar 8, 2013 IP
  4. Isak Hejnesen

    Isak Hejnesen Greenhorn

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    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 */
    }
     
    Isak Hejnesen, Mar 8, 2013 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    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):
     
    deathshadow, Mar 8, 2013 IP
  6. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #6
    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):
     
    creativewebmaster, Mar 8, 2013 IP