Web Tip: Het maken van een Herbruikbare "Button" Klasse

Webpagina's zijn vol knoppen. Navigatie, links, "volgende" knoppen, "submit" knoppen "OK" knoppen, "sluiten" knoppen ... de lijst gaat maar door. Wanneer je over het ontwerpen van een nieuwe webpagina, is de kans haar gaan hebben veel knoppen. Maak het leven makkelijker voor jezelf maken door een knop klasse die je kunt hergebruiken steeds in uw HTML wanneer je een knop.

Niet alleen is dit een gunst aan u, maar het is goed voor uw gebruikers en esthetiek ook. Consistentie is een belangrijke factor in usability. Laten we beginnen.

Gradient Achtergrond voor de knop

Houden dingen eenvoudig is de sleutel hier. We zijn zeker willen houden onze knoppen tekst. Dit is een must voor de toegankelijkheid, bruikbaarheid en uitbreidbaarheid. Een manier kunnen we dit doen, maar nog steeds onze knoppen ziet er geweldig uit en visueel te onderscheiden is door hen een mooie kleurverloop achtergrond.

Deze gradient achtergrond zal horizontaal herhalen, dus knoppen kunnen worden zo lang of kort als we ze nodig hebben, en niet worden beperkt door de afmetingen van de afbeelding. Laten we maken het verloop in Photoshop. Maak een nieuw document 20px breed en 75px hoog. Deze grafiek kan zo dun zijn als 1px omdat het slechts gaat om horizontaal te worden herhaald, maar we zullen het hierbij laten 20px zodat we kunnen zien wat we doen. De bestandsgrootte verschil is verwaarloosbaar toch.

Vul het document met een kleur. Het maakt niet uit welke, we zijn te bedekken met een laag stijl toch. Het moet wel gevuld, want de laag stijl iets te worden op de top van.

Dubbelklik nu die laag in het palet Lagen (Venster> Layer) om het laag stijlen. Klik op de Gradient Overlay stijl. Standaard moet je een straight up-en-neer helling van wit naar zwart. Dit is goed, klik op de helling preview en veranderen de kleuren naar iets meer geschikt voor knop uw ontwerp stijl. In dit geval zal een aantal leuke verzadigd rood doen:

Sla uw document (vreemd genoeg, PNG-24 is vaak de beste preset voor beelden als deze. Hoogste kwaliteit, laagste bestandsgrootte). Met behulp van een slimme naamgeving zoals "button-bg.png". Zorg ervoor dat u uw PSD voor dit, wie weet wanneer je zou willen weer springen daar en kleuren, positionering van de helling, of enige andere subtiele details wijzigen.

CSS voor de knop

Nu hebben we je nodig hebt op te zetten wat CSS voor onze generieke knop klasse dat deze nieuwe achtergrond gebruikt. We gebruiken een klas. "Knop". Eenvoudig, duidelijk, en generieke. Dat is slim code. We willen niet iets te doen aan specifieke zoals "mainContent # # nav li a.button", omdat het hele punt hiervan is dat de klasse generiek is en reseable ergens op de pagina.

Hier is hoe ik zou opzetten deze klasse:

.button { background: url(images/button-bg.png) repeat-x top center #650606; border: 1px solid white; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px 8px; color: white; font-weight: bold; font-size: 12px; text-align: center; } .button:hover { background: white; border: 1px solid red; color: black; } 

Wow dat is een beetje een mondvol voor een CSS verklaring huh? Elk beetje is het belangrijk hoor. Laten we gaan door elk attribuut.

• Achtergrond: dit is waar we de helling beeld wij geschapen. Let op de "top"-instelling, die het houdt verticaal uitgelijnd naar de top van de knop en herhaalt dat het beeld horizontaal met "repeat-x". Merk ook is er een hex-code aangegeven voor de achtergrondkleur. Deze waarde is ingesteld op dezelfde kleur als de bodem van het verloop beeld. Voor het geval deze knop groeit groter dan het beeld, zal de kleur mooi te worden voortgezet.
• Border: A single-pixel witte rand is hier toegepast. Als onze knop is dan wit, dit zal onzichtbaar, maar aangezien ik wil een gekleurde rand gebruiken op de hover staat, zal de reguliere stand moet een grens ook. Anders zal er een lichte "sprong" op zweven dat ongewenst is. De volgende twee stijlen zijn om rond de hoeken op de knop. De eerste specifiek is voor Mozilla-gebaseerde browsers (Firefox, Flock, ...), is de tweede specifieke Webkit gebaseerde browsers (Safari, Konqueror, ...). Andere browsers (IE) zal niet zien de afgeronde hoek, maar geen kwaad geen fout.
• Vulling: Dit is van vitaal belang om de tekst weg te houden van de randen van de knop. Geeft de knop sommige lichaam. Maakt het button-achtige en gemakkelijker te klikken.
• Kleur: Onze achtergrond is een donker rode kleur, dus om de tekst laten zien make-up, wit is goed. Just in case afbeeldingen worden uitgeschakeld voor een browser, wordt de achtergrond van onze knop nog steeds donker rood, omdat we dat in de knop ook, zo wit is hier volkomen veilig.
• Font-size/weight/text-align: Pretty much voor zichzelf hier. Normaal gesproken zou ik niet grootte tekst in PX waarden, maar in het geval van een knop, waardoor die naast niet-formaat kunnen in IE 6 zou kunnen zijn ideaal voor consistentie.
• Hover: Dit is wat nodig is om onze knop daadwerkelijk voelt als een knop. Buttons iets doen wanneer ze rolde. Onze zal direct overschakelen naar een witte achtergrond met zwarte tekst en met een rode rand. Zeer sterk, heel duidelijk een knop.

Met behulp van onze Button in Code

Omdat onze klas dus een soortnaam is, kunnen we overal gebruiken!

Reguliere ol 'hyperlink:

 <a href="/home" class="button">Go Back Home</a> 

Echt lang link:

 <a href="/contact" class="button">Visit The General Contact Form Page</a> 

Submit knop:

 <input type="submit" class="button">Submit</input>