5 Efecte de hover CSS elegante pentru site-ul dvs [2023]

de
Tweet
Share
Share
Pin

Îmbunătățește Interacțiunea cu Efectele CSS Hover

Majoritatea site-urilor web contemporane utilizează foi de stil în cascadă (CSS). Unele pagini web folosesc elemente CSS de bază, în timp ce altele integrează funcții complexe pentru a spori atractivitatea aplicațiilor web.

Integrarea unor efecte vizuale captivante poate îmbunătăți semnificativ rata de clic pe site-ul tău, poate motiva utilizatorii să efectueze acțiuni și chiar poate crește timpul pe care aceștia îl petrec pe site.

În acest material, vom explora conceptul de efecte CSS hover, vom analiza cum pot ele contribui la un site web mai atractiv, vom explica cum se pot implementa și vom prezenta exemple concrete de site-uri web care utilizează efecte hover CSS uzuale.

Ce reprezintă efectul hover CSS?

Efectul hover CSS se manifestă atunci când un vizitator al site-ului trece cu cursorul mouse-ului peste un anumit element. Aceasta poate declanșa modificări precum schimbarea culorii, a textului sau alte efecte animate. Aceste efecte sunt introduse pentru a crește interactivitatea și a îmbunătăți navigabilitatea site-ului.

Efectele hover CSS se pot realiza fie prin tranziții, fie prin animații.

Tranziții

Tranzițiile permit schimbarea aspectului sau comportamentului unui element pe o pagină web. Acestea necesită un eveniment declanșator, cum ar fi trecerea cursorului peste un element. Tranzițiile evoluează de la starea inițială la starea finală după declanșare, se execută o singură dată și nu permit specificarea unor stări intermediare.

Animații

Animațiile folosesc cadre cheie, permițându-le să se repete, să bucleze și să evolueze între starea inițială și cea finală, incluzând și stări intermediare. Un cadru cheie specifică modul în care elementele animate sunt redate în anumite momente din secvența animației.

Tipuri de efecte Hover CSS

Efectele hover CSS pot fi aplicate textului, imaginilor, înregistrărilor video, linkurilor sau butoanelor. Mai jos sunt câteva dintre cele mai importante utilizări:

#1. Efecte pentru Text

Aceste efecte sunt ideale pentru un site web minimalist, unde designul trebuie să fie simplu, dar eficient în transmiterea mesajului. Acestea pot fi:

  • Efect de text tip terminal: imită tastarea pe un procesor de text, cu cuvinte care clipesc la o viteză adecvată pentru a fi citite.
  • Animație text: textul poate apărea dinspre sus, jos sau lateral.

#2. Efecte Hover pentru Link-uri

Un site web obișnuit conține numeroase hyperlinkuri care trimit utilizatorii către diferite secțiuni. Efectele hover pentru link-uri pot lua formele:

  • Modificarea culorii linkului: de exemplu, trecerea de la albastru la roșu.
  • Modificarea culorii de fundal: schimbă culoarea fundalului linkului.
  • Modificarea textului: schimbă textul afișat de link.

#3. Efecte de Hover pentru Butoane

Butoanele sunt esențiale pe site-uri, fiind folosite pentru a trimite formulare sau pentru accesarea diferitelor secțiuni ale unei pagini. Efectele de hover pentru butoane pot fi:

  • Modificarea culorii textului: de exemplu, schimbarea culorii textului unui buton de la roșu la verde la trecerea cursorului.
  • Modificarea culorii de fundal: butoanele HTML au, în mod implicit, fundal transparent. La trecerea cu mouse-ul, culoarea de fundal poate trece, de exemplu, de la maro la verde.
  • Efect de săritură: crește atractivitatea vizuală prin animarea butonului la trecerea cursorului.

#4. Efecte de Hover pentru Imagini

  • Schimbarea imaginilor: se poate crea un carusel de imagini care se modifică la trecerea cursorului.
  • Imagini cu efect de fade in/out: imaginile devin mai clare la trecerea mouse-ului.

Schimbare text: este frecvent întâlnită pe site-urile web ascunderea descrierilor pe imagini, afișând detaliile la trecerea mouse-ului, cum ar fi un site de călătorii care arată detaliile unui hotel doar la hover.

În continuare, vom descrie câteva efecte hover CSS clasice, ce pot fi folosite pentru site-ul tău web.

Schimbarea Culorii de Fundal la Hover

Acest efect poate fi aplicat butoanelor, linkurilor sau textului afișat pe o pagină web, schimbând culoarea de fundal la trecerea cursorului.

Pentru a schimba fundalul textului, urmează pașii:

  • Utilizează pseudo-clasa :hover pentru a declanșa modificările dorite.
  • Creează un element, cum ar fi un div, un buton sau un link, pe care vei aplica efectul hover.

Iată un exemplu de cod pentru a realiza acest efect:

Fișier HTML:

<html lang="ro">
<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>
        Treci cu mouse-ul și vezi cum mă schimb!
    </div>
</body>
</html>

Fișier CSS:

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

Înainte de hover, rezultatul este:

După hover, rezultatul este:

Schimbarea Culorii Linkului la Hover

Linkurile sunt elemente esențiale ale unei pagini web, permițându-ne să navigăm între pagini. Etichetele HTML <a> sunt utilizate pentru a crea hyperlinkuri. Modificarea culorii linkului la hover crește vizibilitatea acestuia.

Pentru a demonstra acest efect, ai nevoie de:

  • O etichetă selector în <head> sau <body>
  • Definirea pseudo-clasei :hover

Acest exemplu de cod ilustrează un link care se schimbă de la verde la portocaliu la hover:

Fișier HTML:

<html lang="ro">
<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="#">Treci cu mouse-ul peste mine și vezi magia</a>
    </div>
</body>
</html>

Fișier CSS:

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

Rezultatul înainte de hover:

Rezultatul după hover:

Evidențiere Glisantă la Hover

Acest efect adaugă o umbră de casetă la un link inline atunci când cursorul trece peste el, modificând totodată și culoarea linkului. Pentru a realiza acest lucru, urmează pașii:

  • Adaugă padding în jurul linkului (de exemplu, 0.25rem).
  • Adaugă o margine de valoare similară, pentru a preveni perturbarea fluxului textului de către padding.

Un fișier HTML simplu ar putea arăta astfel:

<html lang="ro">
<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="#">exemplu.ro</a>
    <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
</body>
</html>

Fișierul CSS ar putea fi:

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;
}

Înainte de hover:

După hover:

Subliniere Curcubeu la Hover

Acest efect adaugă o subliniere multicoloră textului la trecerea cursorului.

  • Utilizează pseudo-clasa :hover cu gradient liniar pentru a obține o tranziție lină între culori.
  • Creează un element de legătură pentru a aplica efectul hover.

Iată un exemplu de cod:

Fișier HTML:

<html lang="ro">
<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>Acesta este efectul hover <a href="#">Curcubeu</a>.</p>
    </div>
</body>
</html>

Fișier CSS:

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;
}

Înainte de hover:

După hover:

Schimbarea Textului la Hover

Schimbarea textului are loc atunci când textul este înlocuit cu un alt conținut sau text la trecerea cursorului. De exemplu, un link „comentarii” se poate schimba în „Adaugă un Comentariu” la hover.

Pentru implementarea schimbării textului la hover, ai nevoie de:

  • Pseudo-elementele ::before și ::after, care creează un element separat pentru ca textul să fie schimbat la hover.
  • Pseudo-elementul :hover, care modifică poziția sau vizibilitatea conținutului la trecerea cursorului.

Iată o demonstrație a modului de implementare a acestui efect:

Fișier HTML:

<html lang="ro">
<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 comentarii</span></button>
</body>
</html>

Fișier CSS:

button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Adaugă un Comentariu" }

Înainte de hover:

După hover:

Site-uri Web cu Efecte Hover Remarcabile

Pentru a te inspira, iată câteva site-uri web pe care le poți consulta:

#1. Canva

Canva este un nume important în design, ajutând persoanele fără cunoștințe de specialitate să creeze design-uri atractive. Site-ul utilizează efecte hover impresionante, de la pagina de start până la paginile de produse. Fondul este întunecat și neclar în pagina de start, dar se clarifică la hover, iar imaginile devin vizibile. Efectele hover apar și la selectarea diferitelor șabloane de design.

#2. Haus

Haus este un exemplu excelent de site care folosește sublinierea la hover, schimbarea textului la hover și schimbarea culorii de fundal la hover.

#3. Mainworks

Mainworks implementează atât animații, cât și tranziții pentru efectele sale hover. Printre efectele notabile se numără schimbarea textului, a culorii și mărirea textului și a imaginilor la trecerea cu mouse-ul.

Concluzie

Alegerea efectelor hover potrivite pentru site-ul tău depinde de tipul site-ului, abilitățile, gusturile și preferințele tale. Platformele de artă sau site-urile de cupoane pot beneficia de efecte mai elaborate, în timp ce site-urile din domeniul juridic sau medical ar putea opta pentru efecte minime. Este important să determini ce funcționează cel mai bine pentru site-ul tău și să te asiguri că efectele alese se armonizează cu identitatea vizuală a brandului tău. Consultă resursele CSS pentru a-ți perfecționa abilitățile.