[Snippet] CSS3 effect on buttons

Post by **FTH** » 03 Dec 2011, 23:20

Author : FTH
Compatibility : Firefox 4+, Internet Explorer 10, Chrome 10, Opera 11.1, Safari 5
Description : Add on rollover an effect made with CSS3

Open file styles/prosilver/theme/buttons.css

Find :

Code: Select all

.reply-icon span   { background: transparent none 0 0 no-repeat; }
.post-icon span      { background: transparent none 0 0 no-repeat; }
.locked-icon span   { background: transparent none 0 0 no-repeat; }
.pmreply-icon span   { background: none 0 0 no-repeat; }
.newpm-icon span    { background: none 0 0 no-repeat; }
.forwardpm-icon span    { background: none 0 0 no-repeat; }

Replace with :

Code: Select all

.reply-icon span   {
   background: transparent none 0 0 no-repeat;
   -webkit-transition:all 250ms linear;
   -moz-transition:all 250ms linear;
   -o-transition:all 250ms linear;
}
.post-icon span      {
   background: transparent none 0 0 no-repeat;
   -webkit-transition:all 250ms linear;
   -moz-transition:all 250ms linear;
   -o-transition:all 250ms linear;
}
.locked-icon span   {
   background: transparent none 0 0 no-repeat;
   -webkit-transition:all 250ms linear;
   -moz-transition:all 250ms linear;
   -o-transition:all 250ms linear;
}
.pmreply-icon span   {
   background: none 0 0 no-repeat;
   -webkit-transition:all 250ms linear;
   -moz-transition:all 250ms linear;
   -o-transition:all 250ms linear;
}
.newpm-icon span    {
   background: none 0 0 no-repeat;
   -webkit-transition:all 250ms linear;
   -moz-transition:all 250ms linear;
   -o-transition:all 250ms linear;
}
.forwardpm-icon span    {
   background: none 0 0 no-repeat;
   -webkit-transition:all 250ms linear;
   -moz-transition:all 250ms linear;
   -o-transition:all 250ms linear;
}

Post by **Mii** » 03 Dec 2011, 23:24

Can we preview it somewhere? thx.

Post by **FTH** » 03 Dec 2011, 23:27

http://www.graphogames.fr/demo/viewforum.php?f=2

past your mouse on button "newtopic"

Post by **Stoker** » 03 Dec 2011, 23:28

Cool, I have installed it on the "prosilver" theme here.

Post by **Arnevb** » 03 Dec 2011, 23:32

Thanks! Looks awesome!

Post by **Vox Populi** » 03 Dec 2011, 23:32

I like!!! Great work.

Post by **Mii** » 03 Dec 2011, 23:35

Looks cool.

Post by **Terr0r** » 04 Dec 2011, 00:43

Looks cool but for me very annoying I had it on another forum

Post by **darkonia** » 04 Dec 2011, 01:07

amazing

Post by **Blackwolf** » 04 Dec 2011, 05:18

Nice. I use it but by KukY Not as much code.