Stilizarea Link-urilor cu CSS: Pictograme, Butoane și Efecte Vizuale

Stilizarea link-urilor cu ajutorul CSS

Atunci când stilizăm link-urile, este important să înțelegem cum se folosesc pseudo-clasele pentru stilizarea diferitelor stări în care se pot afla link-urile.

link (nevizitat) - este starea implicită în care se află un link,
visited (vizitat) - acest link se află deja în istoricul browserului,
hover (acoperit) - atunci când cursorul mouse-ului se află deasupra unui link,
focus - este un link selectat de utilizator când navighează cu tasta Tab sau focalizat programatic folosind HTMLElement.focus(),
active - este un link în stare activă, utilizatorul a făcut click pe link.

🔧 Link simplu - comportament implicit

<p><a href="#">Link simplu</a><p>

/* Folosim CSS doar pentru a face link-ul mai vizibil */
p {
  font-size: 2rem;
  text-align: center;
}

Observații privind starea implicită a link-urilor:

este subliniat,
link-ul nevizitat are culoarea albastră,
link-ul vizitat devine violet,
trecerea cu indicatorul mouse-ului peste link transformă cursorul într-o pictogramă,
dacă este selectat cu tasta Tab, are un contur (outline) vizibil,
link-urile active au culoarea roșie - acest lucru se poate observa dacă faceți click pe link fără să eliberați butonul mouse-ului.

Aceste caracteristici sunt aproape aceleași ca cele din primele zile ale browserelor din anii '90 și au fost păstrate tocmai pentru a nu crea confuzie printre utilizatori. Din acest motiv, stilizarea link-urilor nu ar trebui să se îndepărteze foarte mult de comportamentul cunoscut.

În acest sens, folosiți sublinierea pentru link-uri și nu pentru altceva. Dacă nu doriți să folosiți sublinierea, evidențiați link-urile altfel. Oferiți utilizatorilor un feedback în stările hover și focus, care să difere ușor de starea active.

Stilizarea implicită poate fi eliminată sau modificată folosind următoarele proprietăți:

color
cursor
outline

Pentru a stiliza link-urile putem utiliza proprietățile de mai sus, plus multe altele, așa cum vom vedea în exemplele care urmează.

Pentru a începe, vom scrie o serie de reguli goale în ordinea corectă:


  a {

  }
  a:link {

  }
  a:visited {

  }
  a:focus {

  }
  a:hover {

  }
  a:active {

  }

Această ordine este importantă, pentru că stările sunt construite una peste cealaltă. Declarațiile din prima regulă se vor aplica tuturor celor ulterioare, iar activarea unui link presupune în primul rând ca indicatorul mouse-ului să fie deasupra acestuia.

🔧 Exemplu stilizare link-uri

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <title>Exemplu de stilizare a link-urilor cu CSS</title>
</head>
<body>

<p>Astăzi sunt multe browsere disponibile, cum ar fi <a href="#">Mozilla Firefox</a>, <a href="#">Google Chrome</a> și <a href="#">Opera</a>.<p>

</body>
</html>

body {
  width: 450px;
  margin: 0 auto;
  font-size: 2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 2px;
}

a:link {
  color: gold;
}

a:visited {
  color: red;
}

a:focus {
  border-top: 1px solid;
  background-color: beige;
}

a:hover {
  border-bottom: 2px solid blue;
  background-color: burlywood;
}

a:active {
  background-color: red;
  color: white;
}

Link-uri cu pictograme

Includerea pictogramelor alături de link-uri este o practică obișnuită, iar acestea au rolul de a sugera către ce tip de conținut fac trimitere acele link-uri.

🔧 Exemplu link cu pictogramă

<p>Pentru mai multe informații despre vreme, vizitați pagina <a href="http://#">meteo</a>,
sau <a href="http://#">vremea în Europa</a>, sau verificați <a href="http://#">vremea în lume</a>.<p>

p {
  margin: 20px 100px;
  line-height: 1.6;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus, a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href*="http"] {
  background: url("imagini/external-link.png") no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

Link-uri de tip buton

Instrumentele explorate până acum pot fi utilizate și în alte moduri. De exemplu, starea hover poate fi utilizată pentru a stiliza multe alte elemente diferite, nu doar link-uri.

De multe ori, link-urile sunt concepute pentru a arăta și a se comporta ca niște butoane - un meniu de navigare pentru site, creat cu ajutorul unei liste care conține link-uri și care oferă utilizatorului acces la alte pagini din site, altfel inaccesibile.

🔧 Link-uri tip buton

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <title>Transformarea link-urilor în butoane cu ajutorul CSS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
  <h1>Logo</h1>
  <nav>
    <!-- Elementele "li" sunt pe aceeași linie, pentru că ruperile de linie/spațiu din documentul HTML adaugă spații în pagină, la fel ca spațiile dintre cuvinte, iar aceste spații ar rupe meniul pe orizontală și ar forța căderea pe o a doua linie a unui element. -->
    <ul>
      <li><a href="#">Acasă</a></li><li><a href="#">Echipa</a></li><li><a href="#">Servicii</a></li><li><a href="#">Clienți</a></li><li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
</body>
</html>

body, html {
  margin: 0;
  font-family: sans-serif;
  height: 400px;
  background-color: #ddd;
}

header {
  width: 100%;
  height: 80px;
  padding-bottom: 5rem;
  background-color: #fff;
  box-shadow: 0 1px 5px grey;
  text-align: center;
}

h1 {
  display: inline-block;
  float: left;
  margin-left: 1.5rem;
}

ul {
  padding: 0;
  width: 70%;
  white-space: nowrap;
  float: right;
  margin-right: 1.6rem;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  border-radius: 8px;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link, a:visited, a:focus {
  background: yellow;
}

a:focus {
  outline: 2px dashed green;
  transform: rotate(5deg);
}

a:hover {
  background: orange;
  box-shadow: 1px 1px 10px grey;
  transform: skewY(5deg);
}

a:active {
  background: red;
  color: white;
}

/* Meniu responsive */
@media only screen and (max-width: 650px) {
  header {
    padding-bottom: 0;
    border-bottom: 2px solid;
  }

  ul {
    min-width: 100%;
    margin: 0 auto;
  }

  a {
    display: block;
    width: 100%;
    border-radius: 0;
    border-bottom: 2px solid;
    margin-right: 0;
  }

  li:last-child a {
    border-bottom: 0;
  }

  h1 {
    float: none;
    margin-left: 0;
  }
}

🧠 Quiz - CSS Stilizarea Link-urilor

Fonturi web ➔

Stilizarea link-urilor cu ajutorul CSS

Link-uri cu pictograme

Link-uri de tip buton

🧠 Quiz - CSS Stilizarea Link-urilor

Politica Cookie-uri