CODEWITHSUNDEEP
csshtml
pedromillers
pedromillers

Reputation: 237

CSS or HTML5 image change onClick

I would like simply an effect like is shown with the Sign in / register buttons on this website:

http://css-tricks.com/forums/entry/register

I've tried "Inspect Element" on this page but can't figure out how its being achieved.

i.e. hover over them and they change subtly. Click them and they appear to be "pressed in" for as long as you hold the mouse key down. Release mouse key and they pop back out.

Using a javascript solution at the moment but not very happy with it. Would prefer to leave javascript out. Far too much effort trying to get it to work in Chrome as well as IE.

Upvotes: 0

Views: 1156

Answers (1)

Bram Vanroy
Bram Vanroy

Reputation: 28437

I suppose you mean the active state. Fiddle.

.button, #rcp_submit {
    display: inline-block;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: #4e68c7;
    box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
    color: white;
    white-space: nowrap;
    font-family:'Gotham Rounded A', 'Gotham Rounded B', "proxima-nova-soft", sans-serif;
    padding: 9px 16px;
    line-height: 1.4;
    position: relative;
    top: -5px;
}
.button:hover, .button:focus, #rcp_submit:hover, #rcp_submit:focus {
    color: white;
    background: #3d57b4;
}
.button:active, #rcp_submit:active {
    box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
    -webkit-transform: translate(3px, 3px);
    -moz-transform: translate(3px, 3px);
    -ms-transform: translate(3px, 3px);
    -o-transform: translate(3px, 3px);
    transform: translate(3px, 3px);
}

Upvotes: 1

Related Questions