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: , ,

Posted on Monday, January 19th, 2009 at 6:55 pm - filed under Internet, SEO.
You can follow any responses to this entry through the RSS 2.0 feed.



You can leave a response, or trackback from your own site.

Comments

  1. Reader
    January 28th, 2009 at 3:06 am

    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
    January 28th, 2009 at 3:12 am

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

  3. snursuads
    February 6th, 2009 at 4:12 am

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

  4. admin
    February 6th, 2009 at 11:20 pm

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

  5. PiterKokoniz
    April 8th, 2009 at 7:49 pm

    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
    April 9th, 2009 at 1:11 am

    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
    May 27th, 2009 at 3:02 pm

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

  8. You are now listed on FAQPAL
    May 27th, 2009 at 11:49 pm

    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
    June 4th, 2009 at 4:40 am

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

  10. 22 CSS Button Styling Tutorials and Techniques
    April 8th, 2011 at 6:19 pm

    [...] 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
    March 16th, 2012 at 11:34 pm

    lawyers lewisham…

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

  12. 3 G Andriod Datacards
    July 25th, 2012 at 9:16 am

    3 G Andriod Datacards…

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

  13. Camera Tablet PC
    July 25th, 2012 at 7:55 pm

    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
    July 26th, 2012 at 12:22 am

    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
    September 12th, 2012 at 1:11 am

    advertise…

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

  16. depilacja wrocław
    September 19th, 2012 at 10:27 pm

    depilacja wrocław…

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

  17. tao of bad ass atrraction system
    October 13th, 2012 at 6:25 am

    tao of bad ass atrraction system…

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

  18. blog
    November 5th, 2012 at 9:33 pm

    blog…

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

  19. site web
    December 13th, 2012 at 2:32 am

    site web…

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

  20. chemietoilette
    February 8th, 2013 at 7:38 pm

    chemietoilette…

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

  21. www.TheTaoOfBadassReviewed.org
    February 17th, 2013 at 2:56 am

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

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

  22. Pizza Stone
    March 20th, 2013 at 7:24 pm

    Pizza Stone…

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

  23. 4月 01 13 at 12:13:52
    April 9th, 2013 at 5:02 pm

    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
    April 18th, 2013 at 12:24 am

    can kidney failure Cause Erectile dysfunction…

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

  25. casino reviews
    April 20th, 2013 at 6:33 am

    casino reviews…

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

Leave a Reply

You must be logged in to post a comment.