May 08

20 Awesome and Free CSS Buttons and Icons

Thu, 05/08/2014 - 16:33 — julie

Looking for some ready-coded freebies to save you some precious time? If you’re a web desginer/web developer, then you’ll surely like this freebies collection!

We searched the web for some of the best and free CSS buttons and icons. These buttons and icons have clean and modern designs and some of them come with the free PSD file included. Because they are ready-coded, they’ll save you a lot of time in your design process. Here they are!

Download button PSD + CSS

This is a perfectly crafted download button. Beautiful, subtle gradients, a glassy border, and an icon. It’s simple to change the color or text and use this in your own design.

Download button PSD + CSS

Progress button styles

This is a set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Progress button styles

Pure CSS flat switches

These are some pure CSS flat-style switches with nice structure and animations. CSS snippet is provided for free.

Pure CSS flat switches

CSS3 patterned buttons

These are some nice CSS3 patterned buttons created using subtle patterns.

CSS3 patterned buttons

Tweety – Creative Tweet Button CSS

This freebie is a very creative tweet button. There’s no PSD file, because it is a simple design and can be made by everyone. CSS is provided for free.

Tweety – Creative Tweet Button CSS

Button switches with checkboxes and CSS3

These are some amazing, realistic-looking, css-only UI elements. Find more in the link above.

Button switches with checkboxes and CSS3

Share it! CSS snippet

This is a free CSS snippet for this cool Share It button. It can easily be added to your website!

Share it! CSS snippet

Pure CSS radio buttons

These are some pure CSS flat radio buttons with a really nice animation. Code snippet is free!

Pure CSS radio buttons

Creative buttons effects CSS

This button set consists of some simple, creative and subtle styles and effects to inspire you. Click and hover to see the cool effects.

Creative buttons effects CSS

UI Feedbacks – Feedback ideas for your buttons

This UI kit wasn’t created using any particular coding technique, instead it just serves just as an inspiration to give your interfaces some more dynamism.

UI Feedbacks – Feedback ideas for your buttons

CSS animated Twitter button

Ths is a reat CSS animated Twitter button that opens like a drawer when hovering. Such a cool idea!

CSS animated Twitter button

Boot snipp – CSS code snippets for Bootstrap

Bootsnipp is an element gallery for web designers and web developers and anybody using Bootstrap will find this website essential in their craft.

Boot snipp – CSS code snippets for Bootstrap

Animated SVG icons

Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Here’s a gret collection of animated SVG icons.

Animated SVG icons

CSS iOS7 icons

These are some simple iOS7 icons with CSS snippets given for free!

CSS iOS7 icons

DC Social Media Icons PSD + CSS

This free social icon set contains 20 icons for popular services like Twitter, Facebook, Google+, YouTube, Flickr, Dribbble and other.

DC Social Media Icons PSD + CSS

Stackicons – A colorful icon font

Stackicons are icon fonts for the web with multiple button shapes anda unique “multi-color” option.

Stackicons – A colourful icon font

Social rhombus icons – CSS + PSD

These are some great social media buttons with CSS snippets and PSD files free to download and use in your own projects.

Social rhombus icons – CSS + PSD

Simple icon hover effects CSS

This is a set of simple round icon hover effects with CSS transitions and animations for your inspiration.

Simple icon hover effects CSS

Sketched Social Icons Webfont

This is a selection of varied social media icons in an unique “sketched” style. These are pretty interesting and are provided as a CSS-ready font for you to drop right into your site.

Sketched Social Icons Webfont

Pure CSS icon set

This is a clean set of icons made with CSS. These are very useful for you if you’re a web designer.Pure CSS icon set

The post 20 Awesome and Free CSS Buttons and Icons appeared first on Design Inspiration | How to Design a Website.

Copyright 2009. E-mail Me
Auto Spare Parts