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}

2 Responses to Spice up the links

  1. Delphia Marcum says:

    Hello

    You are looking for Free Backlinks for marcustisater.se ?

    We offering you a free trial to try out our link-building service.
    This can be used to link out to your website, inner page, google map, video, to any link you want to help power up and get more relevance too.

    We want to prove to you that our backlinks work and so we’re willing to prove it to you risk-free.
    Please create an account and then watch the video and submit your order details and let us help you get found online.
    FREE TEST HERE: https://zeep.ly/k4YSH?=96158

    Thanks,
    Delphia Marcum

  2. Lashay Hamilton says:

    Hello

    Are you new to SEO and want to rank #1 on google this upcoming year?
    Here are 3 SEO strategies that will boost your rankings!

    #1: Focus on content
    #2: Optimize your title tag and your meta description
    #3: Use Google Search Console

    Subscribe here to learn more of my
    Secret SEO Tips & Trics https://zeep.ly/WkJgE?=294

    Thanks,
    Lashay Hamilton
    Please do not reply directly to this email!

Leave a Reply

Your email address will not be published.