Image transition using CSS3

Question

I have a CSS3 button like this

<button class="button brownb">My Button</button>

CSS

.brownb:active {
    background: -moz-linear-gradient(center top , #831516, #9B4141) repeat scroll 0 0 transparent;
    color: #FFFFFF;
}
.button:active {
    position: relative;
    top: 1px;
}
.brownb {
    background: -webkit-gradient(linear, left top, left bottom, from(#A55757), to(#831516));
background: -moz-linear-gradient(top, #A55757, #831516);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A55757', endColorstr='#831516');
    border: 1px solid #A55757;
    color: #D7D7D7;
}
.button {
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: inline-block;
    font: bold 14px/100% Arial,Helvetica,sans-serif;
    margin: 0 2px;
    outline: medium none;
    padding: 0.5em 2em 0.55em;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    vertical-align: baseline;
}

I would like something like light just catching the face of a sharp, shiny sword and then going off. Is it possible with CSS3? I have seen this effect many times using Flash and thats why the query.
English is not my native language and so this effect might have got a name ( which obviously I don't know and so I could not google it. ) Is it possible? I am not particular about having this effect on a gradient ( plain background will do )

Fiddle here: http://jsfiddle.net/naveen/V9Rtw/

Disclaimer: This is basically a give me the codez but I am not good with CSS and so this doubt. Any pointers / nudge with the right transitions will be of tremendous help.

Update

I want something like what Google implement in the search page for India.

Link here: http://www.google.co.in/search?q=hello+world

Google does this using this sprite: http://www.google.co.in/images/experiments/p1/p1sprite.png

enter image description here

And they place it inside a folder named experiments :)

Could you post a link to an example of where you have seen the effect? I cannot really picture it. — tw16, Jul 19 '11 at 22:00
I'm pretty sure that button is only visible if you've got Google+, and AFAIK most people don't (yet). — You, Jul 20 '11 at 16:37

Joseph at SwiftOtter · Answer 1 · 2011-07-20T14:03:48.603

Edit: I assume that you are talking about the search button. My network didn't allow me to see the other links that you posted :(. The way that I have found quite successful with the button is to create a background image like this. Say your image is 25px tall by 75px wide. Create an image 75px x 75 px. Put three buttons in there like this:

 ____________
 | normal   |
 ------------
 ____________
 | over     |
 ------------
 ____________
 |          |
 ------------

Then, use the background-position property to set which position you want in the image. Also make sure that the overflow:hidden. This way, you get more control over the effect, download time is negotiable (after all, for progressive download, the make image appears first), and you are more backwards compatible, and it is cached (presumeably). I also don't know how the gradient rendering affects browser performance, but I would imagine that it could possibly have some impact.

Also, please mark as an answer if this answers your question!

JMax

I haven't seen a way to do this. I assume that you want this effect to be visible when they click the button, correct? You could try changing the gradient so that it would either raise up or lower, but that would make the effect for entire way across. Here is a possible way for that:

background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.32, #A55757),
    color-stop(0.57, #831517)
);
background-image: -moz-linear-gradient(
    center bottom,
        #A55757 32%,
#831517 57%
);

From: http://gradients.glrzad.com/

Also, have you thought about using an image? I think that would give you the flexibility that you are looking. I don't know of your targeted audience, but it might also provide better backward compatibility.

JMax

no man. its the new updated +1 button for google plus. a tiny button near the link button "cached" next to each search result. i has got a good transition. — naveen, Jul 20 '11 at 14:32
Thanks. It would have taken a bit for me to come up with that :). A nice one to go into the repository. — Joseph at SwiftOtter, Jul 22 '11 at 14:53

score 1 · Accepted Answer · edited May 23 '17 at 10:32

The answer to your question is: No it is not possible to do this with just CSS. It can however be done with a combination of JavaScript and CSS.

Using your Google +1 button as an example, they have a sprite and will be using JavaScript to switch the background position over a set period of time when the icon is hovered over.

An example of how to animate sprite images over time can be seen here:

How to show animated image from PNG image using javascript? [ like gmail ]

score 0 · Answer 3 · answered Jul 20 '11 at 12:42

0

http://designlovr.com/beautiful-photoshop-like-buttons-with-css3/

This might help you for a shiny effect, transitions must be made still tho

answered Jul 20 '11 at 12:42

Daniel

49
6

Image transition using CSS3

3 Answers3