Aplicarea efectului hover la butoanele de postare

Scris de Luky Mar Mar 01, 2011 9:35 pm

Aplicarea efectului hover la butoanele de postare

Salut tuturor,
In acest tutorial am sa va explic si ofer codurile necesare pentru a putea realiza efectul hover pentru butoanele de postare, functional pe toate cele patru versiuni de teme.

Previzualizare :

Prima imagine e cea din CSS; a doua rezultatul iar a treia e rezultatul pus in functiune + text

Ok, acum urmeaza sa va ofer resursele necesare si sa va explic pasii necesari pentru a putea pune in aplicatie acest mic truc.

In primul rand aveti nevoie de un set de butoane ( galerie butoane ). Dupa ce ati uploadat butoanele pe un site si aveti link-urile la indemana iata ce trebuie sa faceti :

Navigati in :

Aplicarea efectului hover la butoanele de postare Gocss10

Aplicarea efectului hover la butoanele de postare Go-jum10

Panou de administrare

Aplicarea efectului hover la butoanele de postare Arrow10

Afisare

Aplicarea efectului hover la butoanele de postare Images_couleurs

Imagini si culori

Culori

Foaie de stil CSS

Cod:: .buttons img{ background: url('http://i66.servimg.com/u/f66/13/46/75/82/untitl31.png') no-repeat;} .buttons img:hover{ background-position: 0px -25px;}

Atentie :
Imaginea din CSS are inaltimea de 50px iar in CSS gasiti un rand de cod : background-position: 0px -25px; <- acel numar -25px e inaltimea injumatatita a butoanelor unite din CSS de mai sus. Aveti grija sa respectati acest lucru cand veti instala alte butoane, altfel nu va functiona.

Acum ca avem fundalul butoanelor ne trebuie si un text pentru a sti pe ce buton trebuie sa dam click cand dorim sa postam un topic, raspuns etc.
Pentru acest lucru navigati in :

Panou de administrare

Afisare

Imagini si culori

Administrare Imagini

Mod avansat

Butoane

Copiati link-urile imaginilor cu text corespunzatoare fiecarei functii

Atentie : Imaginile cu text trebuie sa aiba si ele jumatatea inaltimii a butonului instalat din CSS pentru ca textul sa fie corect afisat pe buton.
Spre exemplu am sa ofer un set care se afla pe o tema de a mea pe hitskin :
Posteaza un subiect nou : http://hitskin.com/themes/15/36/36/i_post.png
Raspunde la subiect/mesaj privat : http://hitskin.com/themes/15/36/36/i_reply.png
Mesaje noi [ Blocat ] : http://hitskin.com/themes/15/36/36/i_reply_locked.png
Mesaj privat nou : http://hitskin.com/themes/15/36/36/i_msg_newpost.png

Eu deja v-am oferit un set de butoane ca exemplu, sper sa va descurcati.
Succes !