CSS trick – submit button should look same everywhere

By | January 19, 2009

When some one works on a website design, it is important that the look will remain same in all browsers. But creating a consistent interface for users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done.

As is, the input with the type=”submit” is either too ugly (Firefox), a little buggy (Internet Explorer) or completely inflexible (Safari). I tried a lot to make them look same in all the browsers, but couldn’t find any easy way. Finally, I have got the solution form one of my friends, Mr. Kevin Hale. In one of his tutorials, he showed how easily we can do it by using images and a little trick with css.

Here I want to share the technique, if anybody finds it helpful, then let me know, I will try to come with some more examples in the future.

In this example, the first one acts as a submit button, while the other two work as links. You can change them according to what you want.

The HTML Part:

<form name="form1" method="post" action="">
<div class="buttons">
    <button type="submit" class="positive" name="save">
        <img src="images/apply2.png" alt=""/>
        Save
    </button>

    <a href="" class="regular"><!-- class="regular"-->
        <img src="images/textfield_key.png" alt=""/>
        Change Password
    </a>

    <a href="#" class="negative">
        <img src="images/cross.png" alt=""/>
        Cancel
    </a>
</div>
</form>

The CSS Part:

.buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:12px;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* STANDARD */

button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* POSITIVE */

button.positive, .buttons a.positive{
    color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
    color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}

/* REGULAR */

button.regular, .buttons a.regular{
    color:#336699;
}
.buttons a.regular:hover, button.regular:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a.regular:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

See the demo

Post navigation

27 thoughts on “CSS trick – submit button should look same everywhere

  1. Reader

    Great! Thank you!
    I always wanted to write in my blog something like that. Can I take part of your post to my site?
    Of course, I will add backlink?

    Regards, Reader

  2. admin Post author

    @ Reader, yes of course you can, and thanks to you too for nice comment. :)

  3. snursuads

    Hi. Your site displays incorrectly in Firefox, but content excellent! Thanks for your wise words:)

  4. admin Post author

    @ snursuads, thanks for the informative comment. I noticed the problems, they’ll be fixed in the coming updates.

  5. PiterKokoniz

    Hi !! 😉
    I am Piter Kokoniz. Just want to tell, that your blog is really cool
    And want to ask you: will you continue to post in this blog in future?
    Sorry for my bad english:)
    Thank you:)
    Piter.

  6. admin Post author

    Hi Piter, yes, i will continue to post here in the future.

    And thanks a lot to visit my site. :)

  7. Pingback: 22 CSS Button Styling Tutorials and Techniques : Speckyboy Design Magazine

  8. Pingback: You are now listed on FAQPAL

  9. Pingback: 24 Essential Submit Button Enhancements | tripwire magazine

  10. Pingback: 22 CSS Button Styling Tutorials and Techniques

  11. Pingback: lawyers lewisham

  12. Pingback: 3 G Andriod Datacards

  13. Pingback: Camera Tablet PC

  14. Pingback: 3 G Wifi Routers,ADSL Routers,Datacard Routers,3 G Sim Card Routers

  15. Pingback: advertise

  16. Pingback: depilacja wrocław

  17. Pingback: tao of bad ass atrraction system

  18. Pingback: blog

  19. Pingback: site web

  20. Pingback: chemietoilette

  21. Pingback: www.TheTaoOfBadassReviewed.org

  22. Pingback: Pizza Stone

  23. Pingback: 4月 01 13 at 12:13:52

  24. Pingback: can kidney failure Cause Erectile dysfunction

  25. Pingback: casino reviews

  26. Pingback: kompostowniki plastikowe

  27. Pingback: balustrady

Leave a Reply