Home/ Questions/Q 6165667
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T22:12:21+00:00

I have a CSS3 button like this <button class="button brownb">My Button</button> CSS .brownb:active {

  • 0

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 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 ]

    • 0