CSS-knoppen: handleidingen en voorbeelden
Het maken van knoppen met CSS is een van de meest geëxperimenteerde webontwerptechnieken die er zijn. Er zijn veel voorbeelden en tutorials.
De grootste recente trend in CSS-knopontwerp lijkt het elimineren van afbeeldingen, met name achtergrondafbeeldingen, van knoppen. Maar er zijn nog veel meer dingen die ontwerpers met knoppen doen, sommige met afbeeldingen.
Hieronder hebben we meer dan twintig zelfstudies, voorbeelden en hulpmiddelen voor het maken van CSS-knoppen verzameld, waarvan de meeste CSS3 gebruiken.
Inbegrepen zijn knoppen die passen bij vrijwel elke ontwerpstijl. We hebben geprobeerd ons te concentreren op nieuwere technieken hier, zonder de al lang bestaande technieken (zoals de schuifdeur methode voor het maken van afgeronde hoeken) waar de meeste ontwerpers al bekend mee zijn.
Als u andere zelfstudies of voorbeelden heeft die u wilt delen, kunt u dit doen in de opmerkingen!
Tutorials en artikelen
Het knopelement opnieuw ontdekken
Een heel nuttig artikel over de button element in CSS, dat vaak over het hoofd wordt gezien door ontwerpers. Het is een beetje ouder, maar heeft nog steeds veel nuttige informatie over het maken van stijlvolere knoppen met CSS.
Prachtige CSS-knoppen met icon set
Hier is nog een artikel waarin wordt gesproken over het maken van knoppen met pictogrammen, alhoewel span klassen in plaats van de button element.
Bouw kick-ass praktische CSS3-knoppen
Deze video-zelfstudie van Nettuts + laat zien hoe je praktische CSS3-knoppen kunt maken die zelfs een afbeelding van een Twitter-vogelpictogram bevatten, maar die in feite volledig is gemaakt met CSS3.
Mooie Photoshop-achtige knoppen met CSS3
Hoewel de knoppen hier niet bijzonder vooruitstrevend zijn qua uiterlijk, is het verbazingwekkend dat ze volledig zijn gemaakt met behulp van CSS3, zonder gebruik te maken van afbeeldingen, en alleen gebaseerd waren op knoppen die in Photoshop waren gemaakt.
Betere knoppen en navigatie-interacties
Dit is een geweldige, eenvoudige tutorial van Darren Hoyt over het creëren van beter gedrag voor uw knoppen die bezoekers aanmoedigen om te communiceren met uw site.
Super geweldige knoppen met CSS3 en RGBA
Deze tutorial van Zurb behandelt het gebruik van CSS3 en alpha-blending met behulp van RGBA om schaalbare knoppen te maken met slechts één PNG-afbeelding.
Mooie knoppen bouwen met CSS-verlopen
Een zelfstudie voor het bouwen van een knop met behulp van CSS-gradiënten vergelijkbaar met die gebruikt door Mozilla voor Firefox Personas.
Een sexy knop ontwerpen met behulp van CSS
Deze tutorial laat zien hoe je een grote, levendige knop kunt maken zonder afbeeldingen te gebruiken.
Realistisch uitziende CSS3-knoppen
Dit zijn eenvoudige knoppen, volledig gemaakt met CSS3, inclusief enkele pseudo-elementen.
Mooie CSS3-knoppen
Deze zelfstudie laat zien hoe u een eenvoudige, licht glanzende stijlknop kunt maken die schaalbaar is en in elke kleur zonder afbeeldingen kan worden gemaakt.
CSS3-knoppen zonder afbeeldingen
Een eenvoudige zelfstudie voor het maken van dynamische knoppen die alleen CSS3 en geen afbeeldingen gebruiken. Er zijn vier toestanden voor elke knop, inclusief uitgeschakelde, zweefde en geklikte staten.
5 verschillende tutorials van dynamische CSS ronde hoeken koppelingsknoppen
Dit is een verzameling van vijf verschillende zelfstudies voor het maken van CSS-knoppen met afgeronde hoeken. Twee bevatten het gebruik van afbeeldingen, maar de andere drie niet.
Maak een CSS3-knop die goed verslechtert
Totdat alle browsers CSS3 goed ondersteunen, komen we problemen tegen bij het gebruik van dingen zoals knoppen. Deze tutorial laat zien hoe je geweldige CSS3-knoppen kunt maken die er ook goed uitzien in oudere browsers, zoals IE6 en 7.
De navigatiebalk van Apple met alleen CSS
Deze tutorial laat zien hoe je het navigatie-menu in knopstijl opnieuw kunt creëren op de website van Apple. Het werkt het beste in Safari 3+, maar ziet er nog steeds goed uit in andere browsers.
Maak een CSS3 call-to-action knop
Deze zelfstudie laat zien hoe u een call-to-action-knop volledig kunt maken met CSS die verschillende standaard- en zweeftoestanden bevat.
Sexy knopen met CSS3
Deze eenvoudige tutorial laat zien hoe je mooi gestileerde knoppen maakt met unieke hover en actieve statussen. De knoppen kunnen worden geschaald en hun kleur kan eenvoudig worden gewijzigd.
Glanzende knoppen zonder afbeeldingen met alleen CSS3
Als je naar deze knoppen kijkt, is het moeilijk te geloven dat ze zonder afbeeldingen zijn gemaakt, tenzij je heel goed kijkt. De code is ingewikkeld, maar het eindresultaat ziet er geweldig uit, compleet met zweefeffect.
CSS3-knoppen met pictogrammen
Deze zelfstudie laat zien hoe CSS3-knoppen kunnen worden gemaakt met verlopen die ook pictogramafbeeldingen bevatten en die compatibel zijn met andere browsers.
Rol je eigen Google-knoppen
Deze zelfstudie laat zien hoe u schaalbare Google-stijlknoppen kunt maken met gekleurde randen. De eindresultaten zijn minimalistisch en schoon.
Voorbeelden en hulpmiddelen
10 geweldige CSS3-knoppen om te gebruiken op uw website
Hier is een verzameling van tien knoppen die u op uw website kunt gebruiken. Ze zijn allemaal vrij eenvoudig, maar zijn gemaakt met alleen CSS3 zonder afbeeldingen.
CSS3 verloopknoppen
Dit is een enorme verzameling CSS3-knoppen van Web Designer Wall. Inbegrepen zijn een verscheidenheid aan vormen, maten en kleuren, allemaal met hellingen. Een van de beste aspecten over hen is echter hoe sierlijk deze knoppen degraderen in browsers die geen volledige CSS3-ondersteuning hebben.
Knop maker
CSS-Tricks biedt deze gratis CSS3-knopmaker. Definieer gewoon de achtergrondkleuren voor elke status van de knop, de grootte en de tekstkenmerken en het maakt de CSS-code voor u.
Radioactieve knoppen
Deze knoppen gebruiken CSS-animaties in Safari om een pulserend, gloeiend effect te creëren. In andere browsers die CSS3 ondersteunen, zijn ze nog steeds perfect functioneel en zien ze er prima uit.
Ken je andere technieken voor het maken van geweldige CSS-knoppen die hier niet werden genoemd? Of heb je een favoriet voorbeeld? Deel ze alsjeblieft in de reacties!