Making beautiful buttons

    Often, the standard look of buttons cannot be combined with the design concept that the designer came up with, so he draws his buttons.

    What does the typesetter usually do when he sees such a button? Correctly, simply, cuts it out as it is, and inserts it into the layout as a picture.

    For instance:
    Button


    * This source code was highlighted with Source Code Highlighter.


    Everything seems to be simple, but then the layout designer will have to cut out a new picture for each form or link, thereby producing a bunch of pictures and wasting precious time.

    I propose the following approach to this matter (maybe someone has already come up with such a method, but I will immediately take it off, saying that I have not seen it yet).

    For this we need:


    Here's the actual HTML:
    Button

    Button



    Button

    * This source code was highlighted with Source Code Highlighter.


    CSS:



      

    * This source code was highlighted with Source Code Highlighter.


    You can see the case here .

    This whole thing was tested under IE6 / 7/8, Opera 9.62, Firefox 3.0.8, Chrome 1.0.154.53.
    However, under IE8, a bug occurs when clicking on
    , so far I have not defeated him.

    PS Please take pity on me and do not scold me much, this is my first post.
    PPS Moved to theme blog

    Also popular now: