Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

Master CSS Icons, Buttons and Links

Master CSS Icons, Buttons and Links

Icons, buttons and links are another overlooked element on many pages. But they can also make a huge impact on your overall design. Below are some resources for styling better ones.

Add Progressive Icons to Your Site Using :after pseudo-element
This tutorial shows how to use descriptive icons for your links, mainly to show the type of file being linked to (such as a PDF or ZIP archive).

Add Progressive Icons to Your Site Using :after pseudo-element

Super Awesome Buttons with CSS3 and RGBA
A tutorial for creating great buttons using CSS3 and alpha-blending techniques.

 Super Awesome Buttons with CSS3 and RGBA

Scalable CSS Buttons Using PNG and Background Colors
A tutorial for creating buttons scalable both horizontally and vertically using PNG images. The technique degrades gracefully, so even users in IE6 will still see the button (just without the PNG).

Scalable CSS Buttons Using PNG and Background Colors

Add File Type Icons next to your links with CSS
Another tutorial for adding file type icons to your links.

 Web-kreation -   Add File Type Icons next to your links with CSS

22 CSS Button Styling Tutorials and Techniques
Here’s a comprehensive resource list covering more than 20 techniques for creating buttons of all shapes and sizes with CSS.

CSS Tricks’ Link Nudge
A tutorial for creating links that nudge sideways when they’re hovered over.

CSS Tricks' Link Nudge

Sanscons
This is an icon set that can be recolored using just CSS.

  Sanscons

 


Leave a comment