Spice up the links

Med CSS kan du göra länkarna mer interaktiva. Ett sätt är att texten på länken förändras när du kretsar över den, när du hovrar över länken. Detta kan vara bra för att det blir tydligt vilken länk du har valt om du ska klicka på den och det är också en snygg effekt. Det finns många olika möjliga sätt att förändra texten och här är några exempel.

Ett vanligt sätt att förändra texten när du svävar över den är att avståndet mellan bokstäverna blir större. Detta gör, till skillnad från att öka storleken på bokstäverna, att det blir smidigt att se de olika länkarna och att inte den länk du har valt skymmer de andra alternativen runt omkring. Om du förstorar texten kan närliggande länkar komma att skymmas och detta kan vara irriterande för besökaren. För att använda denna effekt skriver du i css-mallen:

a:hover { letter-spacing: 3px}

Antalet pixlar (här 3 pixlar) väljer du själv efter vad du tycker är behagligt.

Ett annat sätt att förändra texten är att ha understrykning eller en linje som går i textens överkant. Det är också möjligt att ha linje både under och över på samma gång. I css-kod skulle detta specificeras:

a:hover { text-decoration: underline overline}

Snyggt och tydligt kan det också vara att ändra på bakgrundsfärgen och textfärgen i länkens textfält. Detta exempel kanske inte är ett under i snygghet och tydlighet, men om du väljer bättre färger kan du uppnå ett fint resultat:

a:hover { color: green; background-color: blue}

Lite mer sublimt är förstås att bara ändra textfärgen. Denna kod är liksom mången annan css-kod inte särskilt komplicerad och straight-forward i sitt utförande. I exemplet nedan, liksom i exemplet ovan, byter du “green” mot önskad färgkod, genom att använda färgkoder kan du få den nyans du önskar.

a:hover { color: green}

Leave a Reply

Your email address will not be published. Required fields are marked *