FREE Code Snippets for Web Developers

When coding a new website, making use of existing code snippets can be a great time-saving practice. In this post you can take a look and download some excellent free code snippets.

Action Buttons

Action Buttons

A simple navigation bar with clean buttons.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Original PSD by Jona Pomerance.

Download

Registration Form

Registration Form

A complete registration form with a “gender” toggle switch, clean text inputs, and a fancy submit button.

The switch could also be used to toggle between sign-up and login.

On Mac OS X and iOS this snippet uses the light/semi-bold font weights of Helvetica Neue for an even sharper look.

Browser compatibility: Firefox 4, Safari 5.1, Chrome 14, Opera 10, IE 9

Original PSD by Ionut Zamfir.

Download

Plans & Pricing Table

Plans & Pricing Table

Comes with the usual “highlighted” plan.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Original PSD by Benoît Philibert.

Download

Simple Toggle Switch

Simple Toggle Switch

A simple toggle switch with subtle shadows and details.

Browser compatibility: Firefox 4, Safari 5.1, Chrome 14, Opera 10, IE 9

Original PSD by Luke Etheridge.

Download

Download Buttons

Download Buttons

You’ve seen it before, but these always come in handy: a set of shiny buttons in multiple colors.

The inner glow effect (which is slightly visible by default but lights up on hover) is created using CSS3 radial gradients.

The Sass source includes a function that generates color variations from a single input color.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 7

Original PSD by Julius Csurgo.

Download

Task List

Task List

A simple task list with custom checkboxes and pure CSS icons.

The custom checkboxes are created using a combination of the :checked and ~ adjacent sibling selectors. This allows us to dynamically style an element that comes after the checkbox, as if it were the checkbox itself. The native inputs can then be hidden from view while we keep the ability to click/toggle by wrapping everything in a label.

The list/3-lines icon is made of a simple rectangle with two offset shadows.

Browser compatibility: Firefox 4, Safari 5.1, Chrome 14, Opera 10, IE 9

Original PSD by Wassim Bourguiba.

Download

Flip-down Clock

Flip-down Clock

A “skeuomorphic” flip-down clock for your countdowns and timers.

As usual this is all done with CSS using CSS3 gradients and shadows.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 9

Original PSD by Julien Debove.

Download

Glossy Buttons

Glossy Buttons

A set of sleek, glossy buttons in multiple colors.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Original PSD by Alex Montague.

Download

Pricing Table

Pricing Table

A simple pricing table. Each plan has a title, price, list of features, and purple sign-up button.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Original PSD by Edi Gil.

Download

Social Buttons

Social Buttons

A set of social media buttons for tweeting, liking, and subscribing.

The icons are image-based but a double-resolution version is included for high-density screens.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Download

Facebook Login Form

Facebook Login Form

A simple login form in Facebook color scheme.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Original PSD by Alex Montague.

Download

Metal Progress Bar

Metal Progress Bar

A tiny blue progress bar in a shiny “metallic” container.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 6

Original PSD by Ivo Ivanov.

Download

Modal Box Contact Form

Modal Box Contact Form

An elegant contact form in a modal box with a custom dropdown and round submit button.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Original PSD by Orman Clark.

Download

App Navigation with Notification Badges

App Navigation with Notification Badges

A simple app navigation with colorful notification badges.

The badges are generated from a single input color using Sass functions, which you can easily customize to create your own.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Original PSD by Petrovski Marijan.

Download

Notepad

Notepad

A realistic notepad with a lined paper background and hidden pages at the bottom.

The lines are created using linear gradients, making the content fully flexible in width/height and keeping the markup clean.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Original PSD by Mathieu Berenguer.

Download

Notification Windows

Notification Windows

A set of flat notification windows with pure CSS icons.

The icons are created using before/after pseudo-elements (no extraneous markup) and CSS3 transform functions.

They even work in IE 8 where Unicode characters make up for the lack of CSS transforms support.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Original PSD by Cosmin Negoita.

Download

Analytics Widget

Analytics Widget

An analytics widget with a shiny bar chart and a nice metal texture for background.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Original PSD by Farzad Ban.

Download

Multi-colored Buttons

Multi-colored Buttons

A set of multi-colored buttons with hover and active states.

These are generated from a single input color using Sass functions.

The arrow is done using good old “Comic Sans MS” 😉

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 6

Original PSD by Daryl Ginn.

Download

Dark Pagination

Dark Pagination

A dark pagination complete with hover and active states.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 11, IE 7

Original PSD by Bart Ebbekink.

Download

Dark and Light Dropdown Lists

Dark and Light Dropdown Lists

A set of custom <select> dropdown lists in dark and light color schemes.

These are fully functional and accessible without Javascript or images.

They use the native <select> element with a wrapper element to hide the dropdown arrow.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Inspired by Hemn Chawroka’s PSD.

Download

Share Buttons

Share Buttons

A set of social media share buttons with a 3D effect that makes you want to click them! 😉

Ready for tweets, likes, and +1s.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Original PSD by Sacha Greif.

Download

Settings Panel

Settings Panel
A settings panel with a set of sliding switches and OS X-like title bar.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 9

Original PSD by Haziq Mir.

Download

Newsletter Sign Up Form

Newsletter Sign Up Form

A simple newsletter / mailing-list sign-up form.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8

Original PSD by Farzad Ban.

Download

Month Picker

Month Picker

A selection widget with a shiny selection indicator. Implemented as a month picker.

Created with a set of labels and radio buttons, and using the :checked CSS3 selector.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 9

Original PSD by Liam McCabe.

Download

Growl Notifications

Growl Notifications

A set of growl-like notifications in light and dark color schemes.

Powered by rgba, box-shadow, and a couple of linear gradients.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 9

Original PSD by Virgil Pana.

Download

Chunky Calculator

Chunky Calculator

Just for the fun of it, here is a calculator with chunky buttons and a nice display.

Though it uses no images, I couldn’t help but add a little JavaScript to provide some (limited) functionality.

Techniques used in this snippet include box-sizing/border-box, background-clip, and @font-face.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 6

Original PSD by Zack Smith.

Download

Inset Side Navigation

Inset Side Navigation

A light, inset side navigation menu with button links.

Browser compatibility: Firefox 4, Safari 4, Chrome 14, Opera 10, IE 6

Original PSD by Dan Berkowitz.

Download

Notepaper Blockquote

Notepaper Blockquote

An elegant notepaper blockquote achieved through pure CSS.

Properties used for this snippet include radial-gradient, repeating-linear-gradient, transform, and some :before/:after magic for the curly quotes.

It’s flexible in width/height and degrades well on older browsers.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 6

Original PSD by Liam McCabe.

Download

OS X-style Transparent Window

OS X-style Transparent Window

An OS X-style transparent window with a set of CSS3-powered toggle switches.

Browser compatibility: Firefox 4, Safari 5, Chrome 13, Opera 11, IE 9

Original PSD by Jeff Broderick.

Download

File Download Widget

File Download Widget

A download widget / window with toolbar, close button, progress bars, file icons, and more!

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 7

Original PSD by Dairien Boyd.

Download

Dark Horizontal Navigation

Dark Horizontal Navigation

A dark version of the chunky navigation menu.

Browser compatibility: Firefox 4, Safari 5, Chrome 13, Opera 10, IE 9

Original PSD by Pixeden.

Download

Light Horizontal Navigation

Light Horizontal Navigation

A light, chunky navigation menu with nice hover and active states.

This snippet makes heavy use of the :active pseudo class in order to toggle the active element as soon as the user presses the mouse button and increase the responsiveness of the UI.

JavaScript can then take over when the user releases the mouse button (onclick) to make the change permanent (not implemented here).

Credit to Daniel Hug for the inset text-shadow effect.

Browser compatibility: Firefox 4, Safari 5, Chrome 13, Opera 10, IE 9

Original PSD by Pixeden.

Download

Dark Login Form

Dark Login Form

A dark login form with a custom submit button and plenty of shadows.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8

Original PSD by Rich McNabb.

Download

Animated Progress Bar

Animated Progress Bar

A colorful, animated progress bar that goes from red to green as it progresses.

Check out the smooth transition in the demo (width and color) — no JavaScript involved!

Browser compatibility: Firefox 4, Safari 5.1, Chrome 13, Opera 10, IE 9

Original PSD by Vin Thomas.

Download

Toggle Switches

Toggle Switches

A set of fully functional toggle switches in multiple colors. Useful for switching views and toggling settings.

The functionality is achieved through hidden radio inputs and the use of the :checked and +/~ sibling CSS3 selectors.

Enjoy the smooth on/off transition!

Browser compatibility: Firefox 4, Safari 5.1, Chrome 13, Opera 10, IE 9

Original PSD by Orman Clark.

Download

Graphite Navigation

Graphite Navigation

A shiny navigation menu with buttons that light up on hover and sink on click.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 6

Original PSD by Benjamin Nathan.

Download

Mini Calendar / Date Picker

Mini Calendar / Date Picker

A pretty calendar / date picker with markers for busy days, clean shadows, and a “multi-page” effect.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 6

Original PSD by James McDonald.

Download

Vertical Navigation Menu

Vertical Navigation Menu

A simple vertical navigation menu with icons, counters, and sub menus.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8

Original PSD by Orman Clark.

Download

Selection Widget

Selection Widget

A selection/indicator widget that could be used as an image slider’s pagination.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 7

Original PSD by Manuel López.

Download

Mini Social App

Mini Social App

A mini social app with tabs, hover/active effects, and nice avatar overlays.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 7

Original PSD by Blaz Robar.

Download

Multi-colored Push Buttons

Multi-colored Push Buttons

A set of multi-colored push buttons with cool active states.

A generator is included in the Sass source, allowing you to generate button styles from a single input color.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8

Original PSD by Marian Mraz.

Download

Simple To-do List

Simple To-do List

A simple to-do list with custom checkboxes, icons, pagination, and more!

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8

Original PSD by Facundo Gonzalez.

Download

Animated Profile Popover

Animated Profile Popover

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 7

An animated profile popover / context menu with a nice show/hide transition.

Both height and opacity are animated on hover using CSS3 transitions.

Original PSD by Matthew Skiles.

Download

Sliding Tags

Sliding Tags

A set of tags with nice, colorful counters that slide from the tag’s edge.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8

Inspired by Thomas Bossée’s PSD.

Download

iOS Style Popover

iOS Style Popover

An iOS-style popover with custom checkboxes and nice hover effect.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8

Original PSD by Morgan Knutson.

Download

Search Dropdown

Search Dropdown

A round search box with a fancy search suggestion / autocompletion.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8

Original PSD by Blaze Pollard.

Download

3D Buttons

3D Buttons

A set of multi-colored 3D buttons. Include a normal, hover and active state.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 6

Original PSD by Premium Pixels.

Download

Login Form

Login Form

A clean and simple login form with a round submit button and elegant focus states.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 7

Original PSD by Premium Pixels.

Download

Mini Dropdown Menu

Mini Dropdown Menu

A stylish mini dropdown menu that show/hide on hover.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 7

Original PSD by Premium Pixels.

Download

Little Calendar

Little Calendar

A pretty little calendar design. Perfect for event calendars and date pickers.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 6

Original PSD by Premium Pixels.

Download

Multi-colored Progress Bars

Multi-colored Progress Bars

A set of multi-colored progress bars with stripes and a text label.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 7

Original PSD by Premium Pixels.

Download

Menu with Notification Badges

Menu with Notification Badges

A navigation menu with multi-colored notification badges.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 7

Original PSD by Premium Pixels.

Download

Tabbed Navigation

Tabbed Navigation

An elegant tabbed navigation menu with dropdown menus.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 7

Original PSD by Premium Pixels.

Download

Dark Navigation

Dark Navigation

A dark navigation menu bar complete with hover and active states.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 11, IE 6

Original PSD by Premium Pixels.

Download

Top Bar

Top Bar
A semi-transparent “sticky” top bar with icons, counters, and nice hover/active effects.

Browser compatibility: Firefox 4, Safari 4, Chrome 13, Opera 11, IE 7

Original PSD by Premium Pixels.

Download

Author: Thanh Luu

I'm Thanh Luu, CEO and Founder of Yoarts from 2010. Glad you were interested. To contact me, just drop a post in the support forums.