2
\$\begingroup\$

There are two ways I have been using to create links and style them as buttons:

background: url("/images/sing_up_btn.png") no-repeat scroll 0 0 transparent;
font-family: Arial,Helvetica,Sans-serif;
text-shadow: 0 -1px #444444;
text-transform: none; 

Another one is:

a.btn_link
{
    background: #4468b2; /* Old browsers */
    background: -moz-linear-gradient(top,  #4468b2 0%, #3b5a9b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4468b2), color-stop(100%,#3b5a9b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #4468b2 0%,#3b5a9b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #4468b2 0%,#3b5a9b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #4468b2 0%,#3b5a9b 100%); /* IE10+ */
    background: linear-gradient(top,  #4468b2 0%,#3b5a9b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4468b2', endColorstr='#3b5a9b',GradientType=0 ); /* IE6-9 */
    color:#fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; 
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, .4);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, .4);
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, .4);
  color: #FFFFFF;
  text-decoration:none;
  padding:5px 25px 5px 25px;
}
a.btn_link:active{
margin: 2px -2px 0px 2px;
box-shadow:none;
}

The image used as a background is almost the same as the second code creates a button design. I was wondering which is more efficient and optimized way to create button. With my little understanding, I would think that the one that doesn't uses image. But I have seen many new age well designed websites using images. Does that mean if I use such heavy CSS for a simple button, the code is not optimized?

\$\endgroup\$
1
\$\begingroup\$

I like the second option, it is easy to read if you just reformat it a little bit (also corrected your :active selector and fixed the shadow in IE9):

a.btn_link {
    background: #4468b2; /* Old browsers */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4468b2), color-stop(100%,#3b5a9b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #4468b2 0%, #3b5a9b 100%); /* Chrome10+,Safari5.1+ */
    background:    -moz-linear-gradient(top,  #4468b2 0%, #3b5a9b 100%); /* FF3.6+ */
    background:     -ms-linear-gradient(top,  #4468b2 0%, #3b5a9b 100%); /* IE10+ */
    background:      -o-linear-gradient(top,  #4468b2 0%, #3b5a9b 100%); /* Opera 11.10+ */
    background:         linear-gradient(top,  #4468b2 0%, #3b5a9b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4468b2', endColorstr='#3b5a9b',GradientType=0 ); /* IE6-9 */

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;

    -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, .4);
       -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, .4);
            box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, .4);
    border-collapse: separate; /* http://stackoverflow.com/questions/5617455/issue-with-box-shadow-on-ie9/5617540#5617540 */

    color: #FFFFFF;
    text-decoration: none;
    padding: 5px 25px 5px 25px;
}
a.btn_link:active {
    margin: 2px -2px 0 2px; 
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}

I would also add a simple hover affect like this:

a.btn_link:hover {
    background: #4468b2;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

If you can, consider using a css preprocessor like LESS

.rounded-corners (@radius: 4px) {
    -webkit-border-radius: @radius;
       -moz-border-radius: @radius;
            border-radius: @radius;
}

.gradient-box (@baseColor) {
    @darker = darken(@baseColor, 6%);
    background: @baseColor; /* Old browsers */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@baseColor), color-stop(100%,@darker)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  @baseColor 0%, @darker 100%); /* Chrome10+,Safari5.1+ */
    background:    -moz-linear-gradient(top,  @baseColor 0%, @darker 100%); /* FF3.6+ */
    background:     -ms-linear-gradient(top,  @baseColor 0%, @darker 100%); /* IE10+ */
    background:      -o-linear-gradient(top,  @baseColor 0%, @darker 100%); /* Opera 11.10+ */
    background:         linear-gradient(top,  @baseColor 0%, @darker 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@baseColor', endColorstr='@darker',GradientType=0 ); /* IE6-9 */

    color: white;
    text-decoration: none;
    padding: 5px 25px 5px 25px;

    &:hover {
        background: @baseColor;
        filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    }
}

.pressable-floating-box (@distance: 2px, @blur: 2px, @spread: 0px) {
    -webkit-box-shadow: @distance @distance @distance 0 rgba(0, 0, 0, .4);
       -moz-box-shadow: @distance @distance @distance 0 rgba(0, 0, 0, .4);
            box-shadow: @distance @distance @distance 0 rgba(0, 0, 0, .4);

    border-collapse: separate; // http://stackoverflow.com/questions/5617455/issue-with-box-shadow-on-ie9/5617540#5617540

    &:active {
        margin-right: -@distance;
        margin-left: @distance;
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
    }
}

a.btn_link {
    .rounded-corners;
    .gradient-box(#3b5a9b);
    .pressable-floating-box;
}

I really wouldn't be too worried about css efficiency, yes this does take a little more effort on the browser's part to render than a simple css background image, but the paths are all highly optimized already and this way you have defined the style instead of giving the browser a limited example (try a two line button with each, or zooming the document, or any other of the many ways to mess the button up in one or more browsers).

Comparing the http transfer efficiency of these two probably comes out in favor of the latter as well. The image version comes in 2 requests, while the pure css version is only one. I'd bet they both are fairly minimal on the total bandwidth compared to your page as a whole, but if you were really concerned about this you could always inline the image. If you want to go that route, here is a useful tool: http://www.greywyvern.com/code/php./binary2base64

\$\endgroup\$
  • \$\begingroup\$ -moz prefix can be deleted from code if you not support firefox 3.6 \$\endgroup\$ – Vladimir Starkov Jul 21 '12 at 18:13
  • \$\begingroup\$ @Bill: Thanks a lot for the detailed explanation and the modifications. I have chosen to go the CSS way for my project :) \$\endgroup\$ – gentrobot Sep 10 '12 at 8:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.