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.

rediscoveringbuttonelement

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.

beautifulcssbuttons

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.

practicalcss3buttons

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.

photoshoplikebuttons

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.

betterinteractions

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.

superawesomebuttons

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.

bbbcssgradients

Een sexy knop ontwerpen met behulp van CSS

Deze tutorial laat zien hoe je een grote, levendige knop kunt maken zonder afbeeldingen te gebruiken.

sexycssbutton

Realistisch uitziende CSS3-knoppen

Dit zijn eenvoudige knoppen, volledig gemaakt met CSS3, inclusief enkele pseudo-elementen.

realisticbuttons

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.

prettycss3buttons

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.

css3buttonsnoimages

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.

ronde hoeken

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.

nicelydegrade

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.

applenavigation

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.

oproep tot actie

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.

sexybuttons

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.

glossybuttons

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.

buttonswithicons

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.

googlebuttons

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.

10awesomebuttons

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.

css3gradients

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.

Buttonmaker

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.

radioactivebuttons

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!