Web designers can do some pretty cool stuff with CSS3. As we continue to push the boundaries of existing languages, HTML5 and CSS3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.

Free Zocial Button Set: Social CSS3 Buttons

The standard buttons provided by third parties (such as Facebook, Twitter and SoundCloud) vary in size, style and interactivity. A consistent button set could reduce a lot of that visual noise and inconsistency. Furthermore, having it in CSS format means that changing the text for certain actions would be a breeze for developers, and it also allows administrators of non-English websites to translate labels into their native languages.

iPhone 4 in pure CSS3!

This rendering of iPhone 4 and its icons were made in pure CSS3.

Pure CSS Icons

These icons use lots of CSS3, border-radius being the most obvious but also rotation, gradients and transform (for when an icon is hovered over).

iOS Icons made in Pure CSS

Each one of these icons was rendered in nothing but CSS, no images. Viewed best in Safari 5 or Google Chrome.

Pure CSS social media icons

This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript.

Recreating the Luke’s Beard social icons with CSS3

Social icons with CSS3.

How to Create a Beautiful Icon with CSS3

We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element.

70+ Pure CSS3 Monochrome Icon Set

This is a very high quality icon set made that can be used anywhere and for any purpose. This icons are not limited for a particular use and hence, you can combine the techniques used here to create new icons or use these techniques in your designs in any way.