Eenvoudige knop Oproep tot actie Met CSS en jQuery

Oproep tot actie in webontwerp is een term die wordt gebruikt voor elementen in een webpagina die om een ​​actie van de gebruiker vragen (klikken, zweven, enz.). Vandaag gaan we maak een effectieve en geweldige call-to-action knop met wat CSS en jQuery die de aandacht van de gebruiker trekken en hem aanzetten om te klikken .

Gedurende deze tutorial zullen we elke regel gebruikte code met details uitleggen en hopen dat het nuttig voor je zal zijn. De volgende tutorial gebruikt HTML, CSS en jQuery met moeilijkheidsgraad Beginner en een geschatte voltooiingstijd van 45 minuten.

Tutorial downloaden (.zip) of demonstratie

Deel I - Maak de knopafbeelding

In dit eerste deel laten we u zien hoe u de benodigde afbeeldingen met Photoshop in eenvoudige eenvoudige stappen kunt maken. Laten we beginnen.

Maak een nieuw Photoshop-document met een breedte van 580px en een hoogte van 130px. Ga naar Uitzicht > Nieuwe gids zet dan de oriëntering naar Horizontaal en de Positie tot 65px.

Maak meer gidsen; elk voor de bovenkant, onderkant, links en rechts. Uw afbeelding zou deze volgende handleidingen moeten hebben als u klaar bent:

De gidsen lijken je canvas op te splitsen in de bovenste en onderste helften. Selecteer de Afgeronde rechthoekige tool, stel de Radius tot 5px en teken een rechthoekige vorm op de bovenste helft van het canvas.

Verander de stijlen voor Overlay met kleurovergang en Beroerte.

Selecteer de Type Gereedschap en type “Download” voor als voorbeeldtekst in het vak dat u hebt gemaakt. Lijn de tekst uit naar het midden in het midden van de doos en je uitvoer zou er ongeveer zo uit moeten zien:

We zijn klaar met het maken van de eerste status van de downloadknop. Laten we maak een nieuwe groep aan en verplaats alle lagen erin. Dupliceer de groep en plaats het dan onder de eerste groep. we hebben gemaakt.

Ga naar de gedupliceerde groep en verander de Overlay met kleurovergang en Beroerte stijl van de onze tweede rechthoekige doos (de hovered) met de volgende instellingen:

Gebruik de tweede groep geselecteerd verhuizing hulpmiddel om de hele rechthoekige doos naar de tweede helft van het canvas te verplaatsen.

Dat is het! We zijn klaar met het eerste deel. Sla je afbeelding op als download.png en start je favoriete code-editor op.

Download PSD

Deel II - De HTML

Stap 1 - Maak de nodige bestanden klaar

Maak een map en geef deze een naam. We noemen het jQueryCallToaction voor deze tutorial. Binnen jQueryCallToaction map, maakt u de volgende bestanden / mappen:

1. Leeg HTML-bestand, index.html
2. Leeg CSS-bestand, style.css
3. Leeg JavaScript-bestand, script.js
4. Map, genaamd "afbeeldingen"
5. Plaats download.png binnen afbeeldingen map.

Stap 2 - Link index.html met CSS & JS

Laten we onze link maken CSS en JavaScript naar index.html. Plaats ze binnen . We beginnen met de CSS-bestand:

dan de nieuwste versie van jQuery uit de AJAX-bibliotheekrepository van Google:

en tot slot onze JavaScript-bestand :

Nu onze zou er ongeveer zo uit moeten zien:

Laten we codes voor de onze knoppen erin zetten label :

Uitleg: We hebben alinea's gemaakt voor twee knoppen, elk omwikkeld met met hyperlink binnen. Lijn 1: class = "button1" wordt erin geplaatst , terwijl regel 2: class = "button1" wordt erin geplaatst

 .button1 / * Knop met alleen CSS * / background: url (images / download.png) 0 0; hoogte: 65 pixels; width: 580px; display: block;  .button1: hover / * mouseOver * / background: url (images / download.png) 0 65px;  

 .button2, .button2 a background: url (images / download.png) 0 -65px; hoogte: 65 pixels; width: 580px; display: block;  .button2 a achtergrondpositie: 0 0;  

 $ (document) .ready (function () $ ('. button2 a'). hover (function () $ (this) .stop (). anim ('onacity': '0', 500); , function () $ (this) .stop (). anim ('opacity': '1', 500);););