Aplicarea efectului hover la butoanele de postare

[Luky]

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 : Panou de administrare Afisare 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 !

Tutorial realizat de Luky, actualizat de catre Petronel Numai bine, Echipa Forumgratuit