Butoane Improvizate in CSS

css, html, layout html, tabel css

In acest tutorial va voi arata cum sa editati aspectul celulelor unui tabel astfel incat sa arate ca niste butoane.

Tabelul creat in fisierul HTML il vom edita printr-un fisier .css extern.

table	{
margin-left: auto;
margin-right: auto;
}
td	{
background: #8ae234;
width: 80;
height: 60;
text-align: center;
}
td:hover	{
background: #73d216;
}

Prin margin-left:auto si margin-right:auto am asezat tabelul in centrul paginii. In plus observati ca nu am atribuit nici un fel de contur celulei.

Orice scriem intre acoladele lui td { } si td:hover { } va afecta fiecare celula a tabelului. De retinut este faptul ca instructiunile lui td:hover se vor executa doar atunci cand cursorul mouse-ului se afla peste o celula a tabelului.

Ideea de baza este urmatoarea: celula standard va avea culoarea de fundal precizata prin: background: #8ae234, adica un verde deschis. Cand cursorul se afla peste celula, background-ul ei se va schimba prin background: #73d216, adica un verde mai inchis.

Acest efect il observati des la majoritatea butoanelor, dar aplicatia lui poate fi extinsa foarte mult. De exemplu, daca aveti un tabel si doriti sa evidentiati o linie a acestuia intr-o prezentare.

Mult succes in continuare!

Ti-a placut articolul Butoane Improvizate in CSS?

Ai nevoie de rezolvarea unei probleme la informatica?

Iti recomandam si urmatoarele articole:

• Simple CSS Menu
• Efecte CSS3
• Baza de date auto cu marci si modele masini
• Cum sa configurezi corect un background CSS