Consistent CSS Buttons in Browsers

This CSS will allow for buttons to show the same in IE7 as they do in Firefox 3.6 and other standards compliant browsers. From what I know Facebook, Youtube, and Google all use this trick to display consistent buttons. Enjoy :).

span.primaryOuter {
    border-bottom: 1px solid #E7E7E7;
    border-right: 1px solid #E7E7E7;
    margin: 3px 0 4px 4px;
    height: 32px;
    position: relative;
    z-index: 100;
    display: inline-block;

span.primaryInner {
    background: none repeat scroll 0 0 #EEEEEE;
    border-color: #CCCCCC #999999 #999999 #CCCCCC;
    border-right: 1px solid #999999;
    border-style: solid;
    border-width: 1px;
    height: 30px;
    display: inline-block;

span.primaryInner input {
    background-position: center bottom;
    background-image: url("/images/bigButtonBack.png");
    border: medium none;
    color: #000000;
    cursor: pointer;
    font: 15px arial, sans-serif;
    height: 30px;
    margin: 0;
    vertical-align: top;
    padding: 0 6px;
    width: auto;
    overflow: visible;

span.primaryInner input:active {
    background: none repeat scroll 0 0 #CCCCCC;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s