Buton cu aspect diferit cu CSS si o singura imagine

[AndreyIstetul]

Buna.
Am, de exemplu, aceasta imagine:

As vrea ca prima imagine sa apara atunci cand nu este apasat si nu este tinut mouse-ul, a doua cand este apasat si ultima doar cand e mause-ul pe ea. Din pacate habar nu am cum sa fac acest lucru. Sunt sigur ca e foarte simplu, dar...
Daca s-ar putea sa pun codul care mi-l dai direct in php, nu css, ar fi extraordinar.

Se poate face cu CSS. Ideea este sa ai cele 3 aspecte /pozitii ale imaginii pt buton (normal, hover si active) pozitionate intr-o singura imagine, simetric: sus, centru si jos. Indicat e ca imaginea sa aibe o inltime care se imparte exact la 3.
In CSS se defineste lungimea si inaltimea link-ului cat a butonului desenat in imagine.
Apoi se defineste top, center, si bottom la proprietatea CSS background-position, pentru cele 3 stari ale butonului.

Uite un exemplu din care se intelege mai bine (imaginea are lungimea de 100 pixeli, iar inaltimea 72 pixeli; inaltimea butonului este 24px):

Cod: Selectaţi tot

<style type="text/css"><!--
#home {
  width: 100px;
  height: 24px;
  display: block;
  background: url('imagine.gif');
  background-position: top; 
  text-indent: -9999px;        /* sa nu apara textul din link */
}

/* Cand mouse-ul e deasupra butonului */
#home:hover {
  background-position: center;
}

/* Cand se apasa pe buton */
#home:active {
  background-position: bottom;
}
//-->
</style>

<a href="https://marplo.net/" title="Cursuri Jocuri Anime" id="home">MarPlo.net</a>

- Mai multe detalii si exemple in tutorialul Butoane pentru link-uri folosind o singura imagine si CSS.

- In PHP aplici "echo" la partea de <style> (sau o adaugi in Template).