Blog > Internet > CSS trick - submit button should look same everywhere

CSS trick - submit button should look same everywhere

By Reza on Monday, January 19th, 2009 - filed under Internet, SEO

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

Tags: , ,

Comments

  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

    @ 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

    @ 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

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

    And thanks a lot to visit my site. :)

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

    [...] Submit button should look same everywhere [...]

  8. You are now listed on FAQPAL

    CSS trick - submit button should look same everywhere…

    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 …

  9. 24 Essential Submit Button Enhancements | tripwire magazine

    [...] Submit button should look same everywhere [...]

  10. 22 CSS Button Styling Tutorials and Techniques

    [...] these tutorials are for you. Below, you will find 22 CSS Button Styling Tutorials and Techniques.Submit button should look same everywhereLink : Visit Tutorial » Description : When someone works on a website design, it is important that [...]

  11. lawyers lewisham

    lawyers lewisham…

    [...]CSS trick - submit button should look same everywhere | The Bloggers Watch[...]…

  12. 3 G Andriod Datacards

    3 G Andriod Datacards…

    [...]CSS trick - submit button should look same everywhere | The Bloggers Watch[...]…

  13. Camera Tablet PC

    Camera Tablet PC…

    [...]CSS trick - submit button should look same everywhere | The Bloggers Watch[...]…

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

    3 G Wifi Routers,ADSL Routers,Datacard Routers,3 G Sim Card Routers…

    [...]CSS trick - submit button should look same everywhere | The Bloggers Watch[...]…

  15. advertise

    advertise…

    [...]CSS trick - submit button should look same everywhere | The Bloggers Watch[...]…

  16. depilacja wrocław

    depilacja wrocław…

    CSS trick - submit button should look same everywhere | The Bloggers Watch…

  17. tao of bad ass atrraction system

    tao of bad ass atrraction system…

    CSS trick - submit button should look same everywhere | The Bloggers Watch…

  18. blog

    blog…

    CSS trick - submit button should look same everywhere | The Bloggers Watch…

  19. site web

    site web…

    CSS trick - submit button should look same everywhere | The Bloggers Watch…

  20. chemietoilette

    chemietoilette…

    CSS trick - submit button should look same everywhere | The Bloggers Watch…

  21. www.TheTaoOfBadassReviewed.org

    http://www.TheTaoOfBadassReviewed.org...

    CSS trick - submit button should look same everywhere | The Bloggers Watch…

  22. Pizza Stone

    Pizza Stone…

    CSS trick - submit button should look same everywhere | The Bloggers Watch…

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

    4月 01 13 at 12:13:52…

    CSS trick - submit button should look same everywhere | The Bloggers Watch…

  24. can kidney failure Cause Erectile dysfunction

    can kidney failure Cause Erectile dysfunction…

    CSS trick - submit button should look same everywhere | The Bloggers Watch…

  25. casino reviews

    casino reviews…

    CSS trick - submit button should look same everywhere | The Bloggers Watch…

  26. kompostowniki plastikowe

    kompostowniki plastikowe…

    CSS trick - submit button should look same everywhere | The Bloggers Watch…

  27. balustrady

    balustrady…

    CSS trick - submit button should look same everywhere | The Bloggers Watch…

Leave a Reply

You must be logged in to post a comment.