Stilig CSS: 5 Hover-effekter som løfter nettstedet ditt

by
Tweet
Share
Share
Pin
0 Shares

CSS Hover-effekter: Gjør Nettstedet Ditt Mer Engasjerende

De fleste moderne nettsider benytter seg av Cascading Style Sheets (CSS) for å definere stil og utseende. Mens noen nettsider holder seg til grunnleggende CSS-funksjoner, bruker andre mer avanserte teknikker for å skape attraktive og dynamiske nettapplikasjoner.

Ved å implementere iøynefallende effekter, kan du øke klikkfrekvensen på nettsiden din, oppmuntre brukere til handling, og potensielt øke tiden de tilbringer på siden.

I denne artikkelen skal vi se nærmere på hva CSS hover-effekter er, hvordan de kan forbedre nettsidens utseende, hvordan du implementerer dem, og vi vil gi eksempler på nettsider som benytter stilfulle CSS-hover-effekter.

Hva er en CSS-hovereffekt?

En CSS-hovereffekt aktiveres når en bruker fører musepekeren over et spesifikt element på nettsiden. Dette kan resultere i en endring i farge, tekst, eller andre animerte effekter. Slike effekter er med på å forbedre interaktiviteten og brukervennligheten til nettsiden.

CSS-hovereffekter kan implementeres som enten overganger eller animasjoner.

Overganger

Overganger lar deg endre utseendet eller oppførselen til et element på en myk og gradvis måte. En hendelse, som at brukeren holder musepekeren over et element, fungerer som en trigger. En overgang går fra elementets starttilstand til sluttilstand etter denne hendelsen. En overgang utføres kun én gang og gir ikke mulighet for å definere mellomliggende punkter.

Animasjoner

Animasjoner bruker keyframes, som lar dem gjenta, reversere eller sløyfe effekten, samt bevege seg fra start- til sluttilstand. Animasjoner kan også definere mellomliggende tilstander. Et keyframe angir hvordan et animert element skal se ut på et gitt tidspunkt i animasjonssekvensen.

Ulike Typer CSS-hovereffekter

CSS-hovereffekter kan benyttes på en rekke elementer som tekst, bilder, videoer, lenker eller knapper. Her er noen av de viktigste bruksområdene:

#1. Tekst-hovereffekter

Tekst-hovereffekter passer godt for minimalistiske nettsider, hvor designet skal være enkelt, men likevel kommunisere budskapet tydelig. Disse effektene kan implementeres på følgende måter:

  • Terminalteksteffekt: Denne effekten simulerer skriving på en tekstbehandler. Ordene vil blinke, men med en hastighet som gjør at brukeren kan lese teksten.
  • Tekstanimasjon: Teksten kan gli oppover, nedover eller sidelengs.

#2. Link-hovereffekter

Et typisk nettsted inneholder flere hyperlenker som leder brukerne til forskjellige sider. Disse lenkene øker i antall etter hvert som nettstedet vokser. Link-hovereffekter kan ta følgende former:

  • Endring av lenkefarge: Lenkens farge kan endres fra for eksempel blå til rød når musen holdes over den.
  • Endring av bakgrunnsfarge: Bakgrunnsfargen til lenken endres ved hover.
  • Tekstbytte: Innholdet i lenkeikonet endres.

#3. Knappe-hovereffekter

Knapper er essensielle på nettsider for å sende inn skjemaer og navigere til forskjellige deler av siden. Hovereffekter på knapper kan implementeres ved hjelp av:

  • Endring av tekstfarge: Fargen på teksten på en knapp som sier «Klikk meg» kan for eksempel endres fra rød til grønn ved hover.
  • Endring av bakgrunnsfarge: Standard HTML-knapper er ofte gjennomsiktige. Utviklere kan legge til en bakgrunnsfarge som endres ved hover, for eksempel fra brun til grønn.
  • Spretteffekt: For å legge til visuell appell, kan knappen designes slik at den spretter ved hover.

#4. Bildeeffekter

  • Bytte av bilder: Du kan lage en karusell av bilder som byttes ut når musen holdes over dem.
  • Fade inn/ut bilder: Effekten gjør at bildene blir klarere når musen holdes over dem.

Tekstbytte: Mange nettsider skjuler beskrivelser på bildene sine, som kun blir synlige ved hover. For eksempel kan et reisenettsted vise hotelldetaljer etter at brukeren holder musepekeren over et bilde.

La oss nå se på noen stilige CSS-hovereffekter du kan bruke på din egen nettside.

Endre bakgrunnsfarge ved musepeker

Denne effekten kan brukes på knapper, lenker eller tekst på nettsiden. Når musepekeren treffer elementet, endres bakgrunnsfargen.

Følg disse trinnene for å endre bakgrunnen til teksten din:

  • Bruk :hover pseudo-klassen for å velge elementet du ønsker å endre.
  • Opprett et element som en div, knapp eller lenke der du vil implementere hovereffekten.

Her er et kodeeksempel som viser hvordan du implementerer denne effekten:

HTML-fil:

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
      </head>
      <body>
        <div>
          Hover and see me change!!!!!
        </div>
      </body>
      </html>

CSS-fil:

      div:hover {
        background-color: rgb(255, 0, 0);
        width: 18rem;
        align-items: center;
        text-align: center;
      }

Før hover, vil utseendet være:

Etter hover, vil utseendet være:

Endre lenkefarge ved musepeker

Lenker er viktige elementer på en nettside, da de lar oss navigere fra en side til en annen. HTML-elementet <a> brukes for å opprette hyperlenker. Å endre lenkefargen ved hover kan forbedre synligheten til lenkene.

For å demonstrere denne effekten trenger vi:

  • En selektor-tag enten i <head> eller <body>-taggen
  • En definert :hover pseudo-klasse

Her er et kodeeksempel som viser en lenke som endres fra grønn til oransje ved hover.

HTML-fil:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
    </head>
    <body>
      <div>
        <a href="#">Hover over me and see the magic</a>
      </div>
    </body>
    </html>

CSS-fil:

    a:link {
      color: rgb(0, 255, 34);
    }
    a:hover {
      color: #ff8400;
    }

Utseende før hover:

Utseende etter hover:

Glidende markering ved musepeker

Denne effekten legger til en skygge rundt lenken når brukeren holder musen over den. Lenkens farge vil også endres. For å oppnå dette, følg disse trinnene:

  • Legg til polstring rundt hele lenken (for eksempel 0.25rem)
  • Legg til en margin med tilsvarende verdi. Dette hindrer polstringen i å forstyrre tekstflyten.

Her er en enkel HTML-fil:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <a href="#">tipsbilk.net</a>
      <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
    </head>
    <body>
    </body>
    </html>

Og her er en tilhørende CSS-fil:

    a {
      box-shadow: inset 0 0 0 0 rgb(255, 21, 0);
      color: #ff4000;
      padding: 0 .25rem;
      margin: 0 -.25rem;
      transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
    }
    a:hover {
      color: #fff;
      box-shadow: inset 200px 0 0 0 #ff4000;;
    }
    a {
      color: #ff4000;
      font-family: 'Poppins', sans-serif;
      font-size: 27px;
      font-weight: 700;
      line-height: 1.5;
      text-decoration: none;
    }
    body {
      display: grid;
    }

Før hovereffekten:

Etter hovereffekten:

Regnbue-understrek ved musepeker

Denne effekten legger til en understrek med flere farger til teksten når musen holdes over den.

  • Bruk linear-gradient pseudo-klassen for å skape en myk overgang mellom forskjellige farger.
  • Bruk :hover pseudo-klassen for å velge elementene.
  • Opprett et lenkeelement der du vil implementere effekten.

Her er et kodeeksempel som viser hvordan du implementerer regnbue-understrek ved hover:

HTML-fil:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
    </head>
    <body>
      <div>
        <p>This is <a href="#">Rainbow</a> hover effect. </p>
      </div>
    </body>
    </html>

CSS-fil:

    p {
      max-width: 800px;
      margin: auto 15%;
      line-height: 1.1;
      font-size: 78px;
      font-weight: 700;
      letter-spacing: .0125em;
      color: black;
    }
    a {
      display: inline-block;
      position: relative;
      text-decoration: none;
      color: inherit;
      z-index: 1;
    }
    a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: .07em;
      height: .1em;
      width: 100%;
      background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
      z-index: -1;
      transition: height .25s cubic-bezier(.6,0,.4,1);
    }
    a:hover::after {
      height: .2em;
    }
    p {
      font-size: 58px;
    }

Før hover:

Etter hover:

Tekstbytte ved pekeren

Tekstbytte innebærer at tekst byttes med annet innhold eller tekst når en bruker holder musepekeren over et element. Et godt eksempel er en nettside med en «kommentarer»-lenke. Etter hover kan teksten endres til «Kommenter».

For å implementere tekstbytte trenger du følgende:

  • ::before og ::after pseudo-elementer. Disse skaper et eget element for teksten som skal byttes ut ved hover.
  • :hover pseudo-element som endrer posisjonen eller synligheten til innholdet ved hover.

Her er et eksempel på hvordan du implementerer denne effekten:

HTML-fil:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
    </head>
    <body>
      <button><span>99 comments</span></button>
    </body>
    </html>

CSS-fil:

    button { width: 10em }
    button { height: 3em }
    button:hover span { display: none }
    button:hover:before { content: "Add a Comment" }

Før hover:

Etter hover:

Nettsider med Inspirerende Hover-effekter

Hvis du ønsker inspirasjon, kan du sjekke ut disse nettsidene:

#1. Canva

Canva er et velkjent navn innen design, og hjelper ikke-designere med å lage flotte design. Nettsiden har imponerende hovereffekter på både hjemmesiden og produktsidene. På hjemmesiden starter det med en mørk, uskarp bakgrunn som forsvinner ved hover for å avdekke bilder. Hovereffekter vises også når man velger forskjellige designmaler.

#2. Haus

Haus er et godt eksempel på en nettside som bruker understreking, tekstbytte og endring av bakgrunnsfarge ved hover.

#3. Mainworks

Mainworks bruker både animasjoner og overganger for sine hovereffekter. Noen bemerkelsesverdige effekter er tekstbytte, endring av tekstfarge, og zooming av tekst og bilder ved hover.

Konklusjon

Valget av hovereffekter for din nettside avhenger av nettsidens type, dine ferdigheter, smak og preferanser. Kunst- og kupongplattformer kan foretrekke mer iøynefallende effekter, mens juridiske og medisinske nettsteder kanskje vil velge mer minimalistiske effekter.
Det er viktig å finne ut hva som fungerer best for din nettside, og at effektene stemmer overens med merkevaren din. Utforsk også våre beste CSS-ressurser for å forbedre dine CSS-ferdigheter.