Hoe maak je een link met de hover-afbeelding in gewone CSS

Bijgewerkt: 27 februari 2020 / Artikel door: Jerry Low

openbaring: WHSR wordt door lezers ondersteund. Wanneer u via onze links koopt, kunnen we een commissie verdienen.

* Update-opmerkingen: dit bericht werd voor het eerst gepubliceerd in oktober 2009. Sommige van de technieken die ik noemde, zijn misschien verouderd. Vriendelijk verwijzen naar deze gids voor de nieuwste website-creatie techniek.

Wat is een hover? Definitie geciteerd uit UWStout.edu:

'Hover' is een effect dat optreedt wanneer u de cursor op een willekeurige link plaatst. De link kan worden gecodeerd om op de zweeftekst te reageren door van kleur te veranderen, een nieuwe afbeelding te tonen of zelfs een geluidsbestand af te spelen.

Het hover-effect verbetert de bruikbaarheid van het web en helpt webeigenaren hun webverkeer te sturen. Als u wilt dat uw webgebruikers extra aandacht besteden aan een speciale link, is een goede manier om dat te doen een link met een aantrekkelijk hover-effect te creëren. Een eenvoudig zweefeffect als dit (een eenvoudige onderstreping en verandering van tekstkleur) geeft aan dat die tekst 'klikbaar' is en verbetert de webinteracties. Het wijzigen van tekstkleur en -stijlen (onderstrepen / overlijnen / vetgedrukt) is echter erg basaal en er kan nog veel meer worden gedaan met hover.

In dit artikel ga ik laten zien hoe je goed uitziende koppelingen met zweefeffect kunt maken.

Voorbeeld 1: koppeling met zweefknop

Bekijk eerst het werkende voorbeeld (plaats de muis over de link om te zien hoe het werkt - verandering van icoon aan de zijkant).

Voorbeeld 1 - Koppeling met afbeelding van zweefknop

Dit is de voltooide versie van wat er in dit voorbeeld wordt gebouwd.

Hoe we het creëren in gewone CSS?

De knopafbeelding

Stap 1, zoals u kunt zien, hebben we een pijlpictogram nodig in twee verschillende versies. In ons voorbeeld gebruikte ik rood (#CC3300) als de standaard linkknop; en grijs (#333333) voor het zweefeffect. Een dergelijke knop kan eenvoudig worden gemaakt met behulp van beeldbewerkingssoftware.

We hebben nu de rode kleurknop (laten we zeggen, b1.png) en de rey-kleur (knop zeg, b2.png). Voeg deze twee samen in één afbeeldingsbestand met b1.png op b2.png. Dit is ons laatste beeld voor de link. Noem het (zeg, x.png) en upload de gewenste locatie (in mijn geval heb ik het in mijn WP-sjabloonmap geplaatst).

Voor uw referentie:

b1.png , b2.png en x.png

De CSS-code

Vervolgens op de CSS-code. Wat we eigenlijk willen bereiken is om de linktekst een klein beetje naar rechts in te voegen om ruimte te maken voor de knop; en tegelijkertijd een ander beeld weergeven wanneer de link in zweefstatus is. Dit zijn behoorlijk fundamentele dingen, behalve dat we een kleine draai aan de achtergrondpositie nodig hebben. De truc is om het bovenste gedeelte van de afbeelding (de rode knop) voor de originele link te tonen; en wanneer u zweeft, verplaatst u de achtergrondafbeelding met een -11px (dit kan verschillen op uw website) marge om de grijze knop weer te geven.

.xa {color: #cc3300; padding-left: 14px; lettertype: vet; achtergrondafbeelding: url (images / x.png); achtergrondpositie: 0 2px; achtergrondherhaling: geen herhaling; }
.xa: hover {color: #333333; padding-left: 14px; lettertype: vet; achtergrondafbeelding: url (images / x.png); achtergrondpositie: 0 -11px; achtergrondherhaling: geen herhaling; }

Implementatie

Om met dit zweefeffect te pronken, voegt u gewoon klasse x in het aangewezen gebied in. Hier is een voorbeeld van hoe u het kunt doen.

Startpagina

Voorbeeld 2: Link in hover-achtergrond

Met hetzelfde concept zijn er eindeloze manieren waarop u uw links er cool kunt laten uitzien. Hier is nog een voorbeeld van wat we kunnen doen met de hover-effecten met een iets andere methode. Nogmaals, kijk eens naar de voltooide versie.

Voorbeeld 2 - Link in hover-achtergrond

In dit voorbeeld ga ik een hyperlink maken met een knop, waarbij de achtergrond verandert wanneer gebruikers met de muis eroverheen gaan.

Hoe we het creëren in gewone CSS?

De achtergrondafbeeldingen

Maak eerst twee afbeeldingen met een afgeronde rechthoek. Voor demonstratiedoeleinden zullen we deze twee afbeeldingen in dit voorbeeld niet samenvoegen. We noemen de rode (#CC3300) rechthoek als b1.png; en de kastanjebruine (#9F2800) rechthoek als b2.png.

De CSS-code

Hierna volgen de codes voor uw stylesheet (in dit tweede voorbeeld noemen we de klasse 'y').

ay {width: 280px; hoogte: 42px; kleur: #000000; opvulling: 10px; text-decoration: none; weergave: blok; lettertype: vet; background-image: url (images / b1.png); achtergrondherhaling: geen herhaling; }
ay: hover {width: 280px; hoogte: 42px; kleur: #FFFFFF; opvulling: 10px; lettertype: vet; text-decoration: none; weergave: blok; background-image: url (images / b2.png); achtergrondherhaling: geen herhaling; }

Implementatie

Om de link weer te geven, voegt u eenvoudig de class (y) in de tag in uw broncode in. Voorbeeld:

Startpagina

Afsluiten

Ik hoop dat dit artikel je waardevolle informatie heeft opgeleverd en sommigen van jullie heeft geïnspireerd om CSS op een creatieve manier te gebruiken. Als er nog andere punten zijn die u volgens mij in deze handleiding zou moeten toevoegen, laat dan uw ideeën achter in het commentaargedeelte.

Over Jerry Low

Oprichter van WebHostingSecretRevealed.net (WHSR) - een hostingreview die wordt vertrouwd en gebruikt door gebruikers van 100,000. Meer dan 15 jaar ervaring in webhosting, affiliate marketing en SEO. Bijdrager voor ProBlogger.net, Business.com, SocialMediaToday.com en meer.