Ajax Loader
×

Shiny Semi-Transparent Colored Buttons

Shiny button set created by James Kyle. The whole button constists of two div's (one as the main button and another one to render the shine). They are made semi-transparent by using rgba values. Shine is created by just using the linear gradients and box-shadows with rgba values.

When the button is hovered, the shine is set to move to left with ease by using the CSS3 transition properties. When clicked, the opacity of the shine is set to 0 to make it look like it fades away. Pretty cool effect that is practical to use. Check the code below

Related:

10
X
×

Coding Preferences


HTML

CSS

Javascript

More

4 Comments

× New

Sign In to comment

madyar:

gr8 effect on top border hover , click! nice

Cody Ro:

This is a greate. I already use it on my website ;)

Thanks

Michael Shepanski:

While I'm not using these buttons on my site. I do love the shine effect. By simply adding the .shine to my CSS, I can shine all the things!! -- Thanks! :D

LukyVj:

I love it !
Great effect on hover !

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+