CSS

stu9820 · May 17th, 2004, 12:05 PM

Is there anything in CSS to mimic the text of a button dropping slightly when it's being pressed.

Some submit buttons:
http://www.webreference.com/programming/css_stylish/

richard.york · May 17th, 2004, 02:13 PM

Where there's a will there's a way.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type='text/css' media='screen'>
            a#button {
                border: 1px solid black;
                padding: 5px;
                width: 50px;
                height: 20px;
            }
            a#button:active {
                margin: 10px 0 0 10px;
                background: orange;
            }
            div {
                margin: 10px;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <div>
            <a href='Javascript:void(0);' id='button'>
                Submit
            </a>
        </div>

        Test
    </body>
</html>

This does the effect with no javascript. It works better if you aren't using an <a> (anchor) element, such as with a <div> but IE doesn't recognize the :active pseudo-class on anything but the <a> element, Mozilla, Opera etc do. IE also has a nasty habit of clipping top and bottom borders on inline elements like <a>, that's why I've enclosed it with a <div> and put some text underneath of it.

hth!

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

stu9820 · May 17th, 2004, 03:33 PM

Thanks for your help.

Here is what I have thus far:
http://www.westga.edu/~stu9820/cssbuttons.htm

My next question is, is there a way to only move the text?

richard.york · May 17th, 2004, 03:48 PM

Sure its possible, all you have to do is use padding instead of margins and have the padding balance itself when the :active event is applied.

Padding: <top> <right> <bottom> <left>

Initially it will be:
padding: 0 10px 0 10px;

Which will have the text centered, then when :active is applied you'll shift pixels from the right side to the left to result in the text moving to the right.
padding: 0 5px 0 15px;

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

stu9820 · May 18th, 2004, 08:05 AM

Thanks that did the trick.