Creati butoane deosebite folosind CSS si metoda sliding doors

10 februarie 2009 | 0 comentarii | Categoria HTML si CSS |

In acest articol va voi arata cum sa creati butoane folosind CSS si metoda sliding doors. Este mult mai bine sa folositi aceasta metoda decat sa folositi butoane de tip imagine pentru ca se poate aplica stilul oricarui link si in acelasi timp nu este nevoie sa creati cate o imagine pentru fiecare buton in parte.

Ce este metoda sliding doors?

Aceasta metoda este foarte simpla. Daca vrem sa avem un buton a carui latime sa fie dinamica, va trebui sa gasim o metoda sa il micsoram sau marim pe orizontala. Vom face asta folosind doua imagini care vor defini butonul: una pentru partea stanga si una pentru partea dreapta ca in exemplul urmator.

Imaginea mai mica din partea dreapta va fi pozitionata deasupra celei din stanga (de aceea metoda se numeste sliding doors). Cu cat imagine din dreapta va fi pozitionata spre partea stanga, cu atat butonul va fi mai mic si invers.

sliding_doors

Crearea butonului

Pentru inceput sa vedem codul HTML care simuleaza butonul. Vom avea elementul <span> in interiorul elementului <a>. Elementul <span> contine imaginea din stanga, cea mare si textul. Latimea butonului va fi data de latimea textului.

[code="html"]Submit[/code]

Acum o sa vedem codul CSS. Clasa .button care va fi aplicata elementului <a>. Clasa .button span va fi aplicata elementului <span> din elementul <a>.
De asemenea vom avea si clasa .button:hover span care o sa schimbe stilul textului din elementul <span>.

Si.. cam asta este Simplu.. nu?

[code="css"]a.button {
/* pozitionarea imaginii din dreapta */
background: transparent url('button_right.png') no-repeat scroll top right;
display: block;
float: left;
height: 32px; /* schimbati valoare in functie de inaltimea imaginii */
margin-right: 6px;
padding-right: 20px; /* in functie de latimea imaginii din dreapta */
/* Proprietati text */
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.button span {
/* Fundal imagine stanga */
background: transparent url('button_left.png') no-repeat;
display: block;
line-height: 22px; /* in functie de inaltimea butonului */
padding: 7px 0 5px 18px;
}
a.button:hover span{
text-decoration:underline;
}[/code]

Rezultatul va arata ca in imaginea de mai jos.

sliding_doors_example