hi,

there is something wrong about the multiple background and multiple shadows syntax

#mybutton
{
    background:
         url('bg1.png') left top no-repeat,
         url('bg2.png') left bottom no-repeat,
         url('bg3.png') right top no-repeat,
         url('bg4.png') right bottom no-repeat,
         url('bg5.png') center center no-repeat,
         red
    ;
}

now, for an effect on this I have to completely rewrite the entire value

#mybutton:hover /* HOVER */
{
    background:
         url('bg1.png') left top no-repeat,
         url('bg2.png') left bottom no-repeat,
         url('bg3_HOVER.png') right top no-repeat, /* CHANGES ON HOVER */
         url('bg4.png') right bottom no-repeat,
         url('bg5.png') center center no-repeat,
         red
    ;
}

then maybe, it would be better to study an alternative method of setting a single value of a stack of values:

#mybutton:hover /* HOVER */
{
    background(3): url('bg3_HOVER.png') right top no-repeat;
    /* this is ^ the background slot */
}

any syntax, even if a lot complex, would be better than completely rewrite the stack of backgrounds

this should be applied, also, on box-shadow and text-shadow properties

#mybutton
{
    text-shadow:
        0 0 20px red, 0 0 10px blue, 0 0 20px lime, 10px 10px 10px pink;
    box-shadow:
        0 0 20px red, 0 0 10px blue, 0 0 20px lime, 10px 10px 10px pink;
}

#mybutton:hover
{
    text-shadow(2):0 0 20px purple;
    box-shadow(2):0 0 20px purple;
}