Posts Tagged ‘2010’

20 New Free Icon Sets for Web Designers and Developers

Once or twice a year we like to take a look at what new icon sets are freely available for designers and developers. We have found a nice selection for you covering most aspects of web, mobile and app devlopment. You will love them!

Stock Icon Set

Stock Icon Set
Number of Icons: 154
Format(s): .ico
Size(s): 16px 32px, 64px & 128px
Stock Icon Set →

iconSweets 2

iconSweets 2
Number of Icons: 400+
Format(s): .psd
Size(s): 16px, 32px & 64px
iconSweets 2 →

Retina Display Icon Set

Retina Display Icon Set
Number of Icons: 400+
Format(s): .png
Size(s): 24px, 48px & 64px
Retina Display Icon Set →Full Preview →

Android Icons – Shape Package

Android Icons – Shape Package
Number of Icons: 40+
Format(s): .png, .psh
Android Icons – Shape Package →

Simple Icon Set

Simple Icon Set
Number of Icons: 16
Format(s): .psd & .png
Simple Icon Set →

NounProject

NounProject
Number of Icons: 500+
Format(s): .svg
NounProject →

Open Source Multitouch Gesture Library

Open Source Multitouch Gesture Library
Number of Icons:
Format(s): .png & .eps
License: Released under a FreeBSD license
Open Source Multitouch Gesture Library →

Agile Toolkit Icon Set

Agile Toolkit Icon SetNumber of Icons: 128
Format(s): .png
Size(s): 16px
Agile Toolkit Icon Set →

Micro Icons

Micro IconsNumber of Icons: 32
Format(s): .ico
Size(s): 16px
Micro Icons →

Strabo Icon Set

Strabo Icon SetNumber of Icons: 16
Format(s): .png
Size(s): 24px
Strabo Icon Set →

Pixim Icon Set

Pixim Icon SetNumber of Icons: 54
Format(s): .gif
Size(s): 12px
Pixim Icon Set →

Pixel Perfect Collection

Pixel Perfect Collection
Number of Icons: 33
Format(s): .png, .ico & .icns
Size(s): 48px
Pixel Perfect Collection →

Basic Rounded

Basic Rounded
Number of Icons: 27
Format(s): .psd
Basic Rounded →

LinkDeck Social Bookmark Icon Pack

LinkDeck Social Bookmark Icon Pack
Number of Icons: 45
Format(s): .psd
Size(s): 16px, 32px, 64px, 128px & 256px
LinkDeck Social Bookmark Icon Pack →

Buddycon – Vector-Based Social Media Icons

Buddycon - Vector-Based Social Media Icons
Number of Icons: 126
Format(s): .ai & .png
Size(s): 32px
Buddycon →

WPZOOM Developer Icon Set

WPZOOM Developer Icon Set
Number of Icons: 154
Format(s): .png, .ai & .psd
Size(s): 48px
WPZOOM Developer Icon Set →

E-Commerce Icons

E-Commerce Icons
Number of Icons:
Format(s): .psd
Size(s): 48px, 64px & 128px
E-Commerce Icons →

Kaching eCommerce Icons

Kaching eCommerce Icons
Number of Icons: 24
Format(s): .png, .ai & .psd
Size(s): 48px & 400px
Kaching eCommerce Icons →

Credit Card, Debit Card and Payment Icons Set

Credit Card, Debit Card and Payment Icons Set
Number of Icons: 18
Format(s): .png
Size(s): 32px, 64px & 128px
Credit Card, Debit Card and Payment Icons Set →

Credit Card Icon Pack

Credit Card Icon Pack
Number of Icons: 35
Format(s): .png
Size(s): 32px
Credit Card Icon Pack →

…and finally … HTML5 Icons

HTML5 Icons
Number of Icons: 10
Format(s): .png & .ai
Size(s): 512px
HTML5 Icons →

Original W3C HTML5 Icons

Original W3C HTML5 Icons
Format(s): .png & .svg
Size(s): 32px, 64px, 128px, 256px & 512px
Original W3C HTML5 Icons →

You might also like…

The Top 50 Web Development Icon Sets from 2009 →
Top 50 Web Development, Design and Application Icon Sets from 2010 →
50 of the Best Ever Web Development, Design and Application Icon Sets →
50 Social Service and Bookmarking Icon Sets for Bloggers Part 1 → & Part 2 →
30 of the Best Web Development and Design MINI Icon Sets →
15 Uniform Payment Options Icon Sets for Ecommerce Design →
14 Free Mobile Application Development Icon Sets →
8 Free Pictogram Icon Libraries and Collections →
40 Fresh and Free Icon Sets for Web Designers and Bloggers →


50 Free Tools and Apps for Web Designers and Developers

Over the past year or so I have bookmarked hundreds of various tools and resources covering all aspects of web & mobile development – There are tools that will improve your work-flow, resources that will clean and validate code, apps that will allow you to collaborate with any number of colleagues, bookmarklets that let you create mockups within your browser, productivity checklists, sites that will track and keep a watchful eye on your sites… and on … and on.

So, having all of these amazing bookmarks, I thought I would share my 50 favorites with you.

I have split the article into the following sub-categories for easier browsing: General Web Development Tools, Web Typography Apps, Browser Tools, Web Site Analysis Apps and, finally, Productivity Apps & Tools.
The apps also don’t include frameworks, Javascript plugins nor template tools, they are all strictly small tools that can help with your development productivity.

Compiling an article about my favorite free web development apps from the past year or so, as you can imagine, was not an easy task, and the chances are that I may have missed a few, so why don’t you tell us about your favorite free development apps within the comment section below. You never know we might collate enough for a part 2 of this post!

ProCSSor – Advanced CSS Prettifier

ProCSSor - Advanced CSS Prettifier
ProCSSor is a useful tool that will 'prettify' and format CSS files on the fly.
ProCSSor – Advanced CSS Prettifier →

ScriptSrc.net

ScriptSrc.net
Tired of hunting down the script tag for the latest version of your Javascript Library of choice? ScriptSrc allows you to copy the latest library (jQuery, MooTools, YUI…) script tags.
ScriptSrc.net →

HTMLform.com

HTMLform.com
With HTMLform.com all you have to do is design your HTML form and you will get a Zip file that can be very easy installed in your website, with everything needed to make it work: a form that can be embedded in any webpage, a small but very potent database to suit your needs, a tool for checking data online and a button for exporting to CSV and Excel formats.
HTMLform.com →

Spritebox

Spritebox
Spritebox is a WYSIWYG tool to quickly and easily create CSS classes and IDs from a single sprite image.
Spritebox →

HTML Purifier

HTML Purifier
HTML Purifier is a standards-compliant HTML filter library written in PHP. It will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant.
HTML Purifier →

Tiny Fluid Grid

Tiny Fluid Grid
Tiny Fluid Grid is a super-simple CSS grid framework generator, inspired by the 1kb Grid, that ships with an index.html with demo code, and the grid.css containing the CSS for the grid you created.
Tiny Fluid Grid →

TABLEIZER!

TABLEIZER!
TABLEIZER! is a quick tool for creating HTML tables from spreadsheet data.
TABLEIZER! →

Try Ruby! (in your browser)

Try Ruby! (in your browser)
If you haven't as yet tried Ruby, with Try Ruby! you can take the quick and painless Ruby tutorial and then test your knowledge directly in your browser.
Try Ruby! (in your browser) →

Plupload

Plupload
Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and batch uploads.
Plupload →

Favigen: Favicon Generator

Favigen: Favicon Generator
Favigen: Favicon Generator →

Super Conversion Button

Super Conversion Button
A call-to-action is one of the most important parts of any web page, displaying the primary action you want people to take. With this simple tool you can create a beautiful, effective call-to-action button in seconds
Super Conversion Button →

Subfolio

Subfolio
Subfolio is made for creative types to share their work online with speed and elegance – publicly or privately. It’s good for freelancers, studios, agencies, enterprise or even the classroom.
Subfolio →

jsFiddle

jsFiddle
JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc.
jsFiddle →

A/B Split Testing Calculator

A/B Split Testing Calculator
A/B Split Testing Calculator →

Frame Box – Lightweight online tool for creating mockups

Frame Box - Lightweight online tool for creating mockups
Frame Box does not have an extensive list of features (like the web based apps above). You can drag and drop, re-size and copy/paste the UI units, but its main focus, and why we like it so much, is that it allows you to create your mockup/prototype very, very quickly
Frame Box – Lightweight online tool for creating mockups →

App Inventor for Android

App Inventor for Android
To use the Android App Inventor, you do not need to be a professional developer, instead of writing code, you visually design the way the app looks and use blocks to specify the app's behavior.
App Inventor for Android →

HTML-Ipsum

HTML-Ipsum
HTML Ipsum is a great tool that gives you lorem ipsum snippets with HTML markup to help test your CSS.
HTML-Ipsum →

CSS3 Button Maker

CSS3 Button Maker
CSS3 Button Maker →

CSS3 Click Chart by Impressive Webs

CSS3 Click Chart by Impressive Webs
Each examples on the CSS3 Click Chart visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.
CSS3 Click Chart by Impressive Webs →

CSS3 Generator

CSS3 Generator
CSS3 Generator is a useful tool that generates the CSS3 properties for the likes of @fontface, border-radius, multi-column
CSS3 Generator →

CSS3 Menu

CSS3 Menu
You can build a cool rounded navigation menu, with no images and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation. This menu works perfectly well with Firefox, Opera, Chrome and Safari. The drop-down also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.
CSS3 Menu →

0to255

0to255
0to255 is a simple tool that helps web designers find lighter and darker colors based on any color.
0to255 →

Wordmark

Wordmark
Wordmark is a tool that allows you to preview any word with the fonts already installed on your computer.
Wordmark →

Awesome Fontstacks

Awesome Fontstacks
With Awesome Fontstacks you can create bundles of matching, free web fonts, with fail-safe font stacks to back them up.
Awesome Fontstacks →

Google Font Directory

Google Font Directory
With the Google Font Directory you can browse all available fonts, learn about the font designers who created them, and then copy the code required to use them directly on your web page.
Google Font Directory →

Fillerati – Faux Latin is a Dead Language

Fillerati - Faux Latin is a Dead Language
If you are tired of using Lorem Ipsum, then Fillerati is for you. You can choose text from the authors Jules Verne, H.G. Wells, Lewis Carroll, L. Frank Baum, Edgar Rice Burroughs or Lewis Carroll.
Fillerati – Faux Latin is a Dead Language →

Wirify: The Web as Wireframes

Wirify: The Web as Wireframes
Wirify is a simple bookmarklet that will turn any web page into a wireframe mockup with only one click.
Wirify: The Web as Wireframes →

maki

maki
Just drag the maki bookmarklet to your toolbar, go to a page where you're working on the HTML/CSS, and click the bookmark. You'll then be directed to a version of your site where you can upload the mock-up image, adjust the transparency of the overlay, and reload your changes seamlessly.
maki →

Browize – Online Browser Resizer

Browize - Online Browser Resizer
Browize – Online Browser Resizer →

The HTML5 Test

The HTML5 Test
The HTML5 test – how well does your browser support HTML5? This tool will let you know.
The HTML5 Test →

Support Details

Support Details
Support Details →

resizeMyBrowser

resizeMyBrowser
resizeMyBrowser →

iPad Peek

iPad Peek
iPad Peek is a handy app that allows you to view how any website will be rendered on the iPad.
iPad Peek →

Moniitor BETA

Moniitor BETA
Moniitor is a FREE website stat monitoring tool, it will allow you to monitor multiple sites and check for stats such as Pagerank, Alexa Rank, Feedburner Subscribers, Twitter mentions and more…
Moniitor BETA →

Uptime Robot

Uptime Robot
Uptime Robot monitors your websites by pinging your site every 5 minutes and alerts you if your sites are down.
Uptime Robot →

WooRank

WooRank
WooRank →

Clue

Clue
Clue is a tiny app, from ZURB, that allows you to test your web pages so that you can find out exactly what parts are memorable and will potentially stick in the minds of your users.
Clue →

Wridea.com

Wridea.com
Wridea is a free tool that stores your ideas, allows you to manage and organize them, collaborate with your friends and colleagues over your ideas, etc. It provides you with all necessary tools and services for organizing your ideas.
Wridea.com →

Domainr

Domainr
When you want a short URL or something big, Domainr will find it, fast and helps you explore the entire domain name space beyond the ubiquitous—and crowded—.com, .net and .org. Inspired by jish.nu, burri.to and del.icio.us.
Domainr →

Thoughtboxes

Thoughtboxes
Thoughtboxes is a simple tool that helps to organize your thoughts so you can make things happen.
Thoughtboxes →

Create Free Privacy Policy

Create Free Privacy Policy
With GeneratePrivacyPolicy.com you can create professional privacy policies agreements tailored specifically to your website or your business.
Create Free Privacy Policy →

Recurse

Recurse
Recurse is a simple solution to show clients your spiffy new design. By emulating a website with multiple flat images clients will have a better idea of what the composition will look like ‘in the wild’.
Recurse →

Launchlist

Launchlist
Launchlist is cool tool to help and encourage web designers and developers to check their work before exposing it to the world at large by going through an essential list of web development requirements. When you click 'Submit Report' you will be either given a 'Go For Launch' or, if issues found, 'Not Advisable'.
Launchlist →

TitanPad

TitanPad
TitanPad is the simplest of tools that allows you to collaborate on a document simultaneously. You can either create a 'public' pad or you can create a 'private' pad for your team with a custom URL.
TitanPad →

CeeVee

CeeVee
Not only specific for developers, CeeVee allows you to create a themed professional resume, giving you the option to make it either public or private.
CeeVee →

Billable

Billable
If you don't likes the tedious task of invoicing, then you will love Billable. It really doesn't get any simpler than this.
Billable →

Bounce

Bounce
Bounce is a tiny app that allows anyone to give feedback on the design of any given webpage.
Bounce →

TinEye Reverse Image Search

TinEye Reverse Image Search
TinEye is a reverse image search engine. It finds out where an image came from, how it is being used, if modified versions of the image exist, or if there is a higher resolution version.
TinEye Reverse Image Search →

CopyPasteCharacter.com

CopyPasteCharacter.com
CopyPasteCharacter is a very useful tool for copying & pasting those impossible to remember HTML entities.
CopyPasteCharacter.com →

NounProject

NounProject
The Noun Project collects, organizes and adds to the highly recognizable symbols that form the world's visual language. The symbols can be downloaded completely free.
NounProject →

You might also like…

A Review of Web Design Trends from 2010 →
The Trend of Minimalist Graphic Design →
How To Control Flow Within Your Web Designs →
Accessibility Principles for the Modern Designer →
Professional Structure and Documentation in Web Design →
Clear Your Mind to Focus on What Matters →
What the Future of Cloud Computing means for Web Designers →
Beginners Guide to Using the Power of Color in Web Design →
Understanding and the Meaning of Color Within Design →


Weekly Design News – Resources, Tutorials and Freebies (N.69)

This is our weekly column were we share our favorites design related articles, resources and resources all from the previous week.

If you would like to be kept up to date with loads of fresh design news and resources, you can follow us on Twitter, on Facebook or even by subscribing to our RSS feed.

Working as an In House Web Designer

Working as an In House Web Designer
Working as an In House Web Designer →

Responsive Web Design: What It Is and How To Use It

Responsive Web Design: What It Is and How To Use It
Responsive Web Design: What It Is and How To Use It →

The Dark Side Of Usability

The Dark Side Of Usability
The Dark Side Of Usability →

Should I work for Free? (Infographic)

Should I work for Free? (Infographic)
Should I work for Free? (Infographic) →

Are We Too Obsessed With Facebook? (Infographic)

Are We Too Obsessed With Facebook? (Infographic)
Are We Too Obsessed With Facebook? (Infographic) →

DHTMLX Touch – HTML5 JavaScript Framework for Mobile and Touch Devices

DHTMLX Touch - HTML5 JavaScript Framework for Mobile and Touch Devices
DHTMLX Touch – HTML5 JavaScript Framework for Mobile and Touch Devices →

Flurid – The Fluid CSS Grid

Flurid - The Fluid CSS Grid
Flurid – The Fluid CSS Grid →

We Love Buttons (Inspiration & Showcase)

We Love Buttons (Inspiration & Showcase)
We Love Buttons (Inspiration & Showcase) →

CSS Only Lightbox/Shadowbox Media Viewer Using CSS Transitions (Tutorial)

CSS Only Lightbox/Shadowbox Media Viewer Using CSS Transitions (Tutorial)
CSS Only Lightbox/Shadowbox Media Viewer Using CSS Transitions (Tutorial) →

Spin those Icons with CSS3 (Tutorial)

Spin those Icons with CSS3 (Tutorial)
Spin those Icons with CSS3 (Tutorial) →

Build a Kickbutt CSS-Only 3D Slideshow (Tutorial)

Build a Kickbutt CSS-Only 3D Slideshow (Tutorial)
Build a Kickbutt CSS-Only 3D Slideshow (Tutorial) →

Building iPhone Android Apps with jQuery Mobile and PhoneGap Slides

Building iPhone Android Apps with jQuery Mobile and PhoneGap Slides
Building iPhone Android Apps →

iconSweets 2 – Free Icons

iconSweets 2 - Free Icons
iconSweets 2 →

Open Source Multitouch Gesture Library and Illustrations

Open Source Multitouch Gesture Library and Illustrations
Open Source Multitouch Gesture Library and Illustrations →

Form Element Styling (PSD)

Form Element Styling (PSD)
Form Element Styling (PSD) →

Omnigraffle iPhone Stencil

Omnigraffle iPhone Stencil
Omnigraffle iPhone Stencil) →

Omnigraffle iPad Stencil

Omnigraffle iPad Stencil
Omnigraffle iPad Stencil) →

Five Minutes (Free Font)

Five Minutes (Free Font)
Five Minutes (Free Font) →

Flow Motion (Free Font)

Flow Motion (Free Font)
Flow Motion (Free Font) →

Vector Currency Pack

Vector Currency Pack
Vector Currency Pack →

Mobile Device .PSDs 2010

Mobile Device .PSDs 2010
Mobile Device .PSDs 2010 →

HR Grunge Splat Brush Pack 1

HR Grunge Splat Brush Pack 1
HR Grunge Splat Brush Pack 1 →

20 Repeatable Pixel Patterns

20 Repeatable Pixel Patterns
20 Repeatable Pixel Patterns →

Previous Weekly Design News…

Design News Roundup Archives →


Tips for Compromising between Designers and Developers

In the real world designers and developers are constantly battling it out over projects. Between two lighthearted developers are the crew who simply make website work while designers add flair and vibrant edges. The two perform very specific yet important jobs which harmoniously combine to create amazing web pages.

Often times, however, bickering can ensue leading to arguing and lost time. All client work from small-scale operations to large design firms is very important and must be treated as such. Below we’ll go over a few tips to help designers and developers reach a middle-ground.

Portrayal of Ideas

One of the biggest problems arises between a misunderstanding of goals and ideas. While designers are interested in sketching and displaying their interests visually, developers are often not so lucky.

It takes time to knock out bits of code and creating a program isn’t an easy task. Communication between the two teams will likely clear up many of these issues. Before even starting on a mockup comp have everybody sit down and go over their objectives for the project. In this way everything is put on the table so everybody is moving forward at the same pace.

Developers may also consider practicing some type of visual communication for programs. Flow charts and graphical diagrams are often the best way to represent what’s going on. It may be worthwhile to practice building programs out of conversation, too.

This isn’t exactly common practice but it does help to strengthen your knowledge as a programmer. Begin by talking out all of the steps needed to build the website you’re looking at, piece by piece. Even write these things down in a list if it helps. These individual pieces will come together in the end to create 1 final web application which can then be passed off to launch.

Carefully Plan Deadlines

Nobody enjoys deadlines but they are a must in business. Especially when working with high-class firms and clientele from all around the world design work must be placed on a schedule.

This is unfortunate for designers since rushed work is almost never good. Time management is a crucial skill to have mastered and apply into every day life. Once you know how much time is available it’s much easier to start right away and plan an easygoing work routine.

The alternative is crunching numbers and pushing your limits the last few nights of a project. This technique can work with developers, although not encouraged, because writing code is mostly logical and doesn’t require high reigns of creativity. Design work can only go for so long before quality begins to seriously degrade.

Group Morale!

Provide enthusiasm and cheer to all of your co-workers. Even though designers and developers may not see eye-to-eye all the time we can all come together and acknowledge the work we do is important.

If everybody is working together to keep others motivated there is no falling behind in the group. All tasks can be finished on time and well before due-date. In this way there’s extra room in the schedule for possible changes, updates, revisions, or anything else.

If it’s possible try building a work plan with your fellow group. Everybody is in on the work together so why not grind out the process together, too? Generally the designer(s) will create a mockup and pass this onto the developers.

From here the coding process begins and each web page is carefully crafted. If there’s any backend work or CMS implementation this would also be addressed post-template design. After the initial layout the designers’ work load shifts to smaller details. These can include page icons or banner graphics.

Ask Questions

Confusion is common amongst a large group, so there’s bound to be questions from some people. Don’t hold back anything you’re unsure of as it’ll ultimately slow down the process.

It’s important to feel comfortable in the working environment and speak openly when you feel the need. Clarifying a small detail up front will get you a direct answer and keep the project train moving. This is much more the case between developers who are working on similar features (frontend/backend Ajax effects).

Not only should fellow team mates be asking questions, but project leaders are imposed to run questions by the clients. If the team is indecisive about certain aspects to the project it would be simpler to contact the consumers directly to figure out what they want. If there is ever a lack of information don’t hold anything back – ask questions when necessary and keep your head moving forward!

Be Respectful of Workspace Time

This is often a no-brainer but doesn’t hurt to be repeated. Each designer and web developer is important to a project and needs to be given time to work. If everybody is hounding on each other and driving the team mad then nobody is productive.

Respect is the name of the game and will get design firms much further in business. Even on a small scale level it’s enormously important to have respect for your partners. Designers and developers each perform a completely separate yet key role in website development.

Make sure all teammates are communicating their ideas openly and honestly. At all times a project work floor should feel fast-paced but relaxed and open. All digital creators can get stressed at times, it’s important to recognize this and release it. Whether a designer or developer just stick to your path and remember everybody is working as a team to reach the same end goal.

You might also like…

A Review of Web Design Trends from 2010 →
The Trend of Minimalist Graphic Design →
How To Control Flow Within Your Web Designs →
Accessibility Principles for the Modern Designer →
Professional Structure and Documentation in Web Design →
Clear Your Mind to Focus on What Matters →
What the Future of Cloud Computing means for Web Designers →
Beginners Guide to Using the Power of Color in Web Design →
Understanding and the Meaning of Color Within Design →


CSS3 Button Tutorials and Techniques Revisited

Once upon a time when a web design required a nice, functional and scalable button it would have had to have been firstly designed in Photoshop, implemented with the sliding doors technique, and you may have had to spice things up with a little Javascript. With CSS3 everything is changing – everything is easier and certainly better.

As well as button tutorials and techniques we have also showcased some CSS3 tools and generators, you will find these at the bottom of the post.

Throughout this Christmas week we are taking a look at the most popular and most resourceful articles that we have published in the past year.
I promise that by next week normal service will resume with even higher quality articles, with even more resourceful posts and, of course, some highly inspirational posts. I can hardly wait !
Hope you have all had a great Christmas!

This article was originally published on February the 15th 2010 and entitled 20 CSS3 Tutorials and Techiques for Creating Buttons.

Pretty CSS3 Buttons

CSS3 Buttons
The Objective of this tutorial is to create a set of button styles that are cross browser compliant, can degrade gracefully for non CSS3 compliant browsers and are are entirely scalable, meaning that you can make it a variety of sizes and colors with ease.
This tutorial lends its self heavily from the Super Awesome Buttons tutorial from Zurb, with some insightful and useful alterations and additions.
Downloads and Docs »Demo »

CSS3 Button That Degrades Nicely

CSS3 Buttons
There was a time where creating a nice looking, scalable button required heavy use of images, the sliding doors technique and even some Javascript.
As it stands a lot of the modern browsers support the CSS we would like to use to create a nice looking button. Firefox, Safari and Opera all have support for rounder corners, box shadows and text shadows.
What used to take six steps and lots of extra mark-up, images and CSS, now only takes three steps and some simple CSS3.
Downloads and Docs »Demo »

Dynamic Buttons With CSS3

CSS3 Buttons
The example in this tutorial demonstrate how to create nice looking, dynamic buttons that are fully scalable using the CSS3 properties border-radius, box-shadow and RGBa.
By using RGBa color values, the button and text shadows will always blend well with any color you choose for your button, no matter if you want the button to be green, red or blue – The code will always remain the same.
Downloads and Docs »Demo »

A Sexy Button Using CSS

CSS3 Buttons
Downloads and Docs »Demo »

Roll Your Own Google Buttons

CSS3 Buttons
Google has a new focus on webkit-specific properties thanks to their new Chrome browser, which uses a branch of the same rendering engine Safari uses.
The buttons use the -webkit-gradient function, which takes in arguments for the gradient start and stop points as well as color and then creates what the browser basically considers an image. That means you can use gradients anywhere you would use images, including backgrounds and even borders (with border-image).
Downloads and Docs »Demo »

Cool Overlapped Menu using Sprites

CSS3 Buttons
Here you can learn how to create a cool overlapped pure CSS menu/button using CSS sprites. CSS sprites can be termed as a method for reducing the number of image requests to a web page by combining multiple images into a single image, and display the desired segment using CSS background-image and background-position properties.
The photoshop source is also available for download, so that you can customize it as per your need.
Downloads and Docs »Demo »

Sexy Buttons

CSS3 Buttons
Sexy Buttons is a HTML/CSS-based framework for creating 'sexy' web site buttons. These stylish, attention getting buttons can be used for calls to action wherever user interaction is desired and can be used with either the <button> or <a> elements.
The entire 1000 icons from the Silk Icons set and the 450+ Silk Companion Icons set are included with the Sexy Buttons download.
Downloads and Docs »Demo »

Radioactive Buttons with CSS Animations and RGBa

CSS3 Buttons
Using CSS animations in Safari, you're able to turn an otherwise ordinary button into a glowing, radioactive mess of awesome.
To make it work, you first have to specify all your button styles and then you add the shadows. Now, in the animation, you switch from a box-shadow that matches the background color to the color of the button to give it the glowing effect – And then you add in some animation. Awesome!
Downloads and Docs »Demo »

Super Awesome Buttons

CSS3 Buttons
This is another tutorial lending itself from the perfectly titled the super awesome buttons, from Zurb. This time the developer has extended them to improve the cross browser compatibility, added a nicer design for when the buttons get clicked and finally removed the necessity to set to different background colors for different states of the buttons.
Downloads and Docs »Demo »

CSS3 Buttons from CSSPlay

CSS3 Buttons
This demonstration, from Stu Nicholls of CSSPlay, will work in Firefox, Safari and Google Chrome and shows how to style buttons using just the border radius, drop shadows and gradient fills.
No graphics have been used in the demo and no extra markup. If you wanted to be adventurous you could also add a hover state change of gradient fill to give an illumination effect.
Downloads and Docs »Demo »

Shiny Happy Buttons

CSS3 Buttons
In this tutorial you will build buttons that use no images, neither in your HTML nor your CSS. There will be no sliding doors and no image replacement techniques. Just straight up, CSS, CSS3 and a bit of experimental CSS. The finished button will be compatible with pretty much any browser (though with some progressive enhancement for those who keep up with the latest browsers).
Downloads and Docs »Demo »

CSS Sprite-Slide Button

CSS3 ButtonsThere are lots of tutorials on sliding doors button and lots on the sprite technique, but never a combination of both.This button combines the wonderful sprite technique with the sliding doors technique to make a beautiful button that not only loads in a snap but also looks great and scales to your text.
Downloads and Docs »Demo »

CSS3 Box-Shadow Button with Inset Values (Aqua Button)

CSS3 ButtonsThere’re plenty of tutorials that describe how to create a sexy aqua button with Photoshop, but none that will show you how to create the button using only CSS, more specifically CSS3 (-webkit-gradient, text-shadow and RGBa).
Downloads and Docs »Demo »

Simple Button with CSS Image Sprites

CSS3 Buttons
The button you’ll be creating in this tutorial takes on traditional styling using subtle gradients and outlines to give the impression of a rounded, three dimensional object. You will learn how to built this simple using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example.
Downloads and Docs »Demo »

Beautiful Buttons with CSS Gradients

CSS3 Buttons
Using a CSS-based method means you don’t have to regenerate images every time you change text, pages will load much faster and it allows text to be easily localized. In this case it also makes the page better from an accessibility standpoint – the text contained in the <a href> can add context.
In this demo you'll be shown a simple use for the new gradient capabilities and learn how to build a nice-looking embossed and beveled button using gradients and existing CSS properties.
Downloads and Docs »Demo »

Fancy Buttons Are Here!

CSS3 Buttons

Downloads and Docs »Demo »

Better Button and Nav Interactions

CSS3 Buttons
The iPhone user controls are responsive, like tactile objects in your hand. The panels slide and the icons glow when you touch them. It gives the illusion of tighter control over the app. Switching to a touchscreen-less web browser, interactions feel stiff and unsatisfying and lack of response creates a feeling of distance been the user and the interface.
In this well described tutorial the button you will build has a distinct :hover and :active states so that it depresses when clicked. The text also bumps down 1 pixel and the text-shadow changes to give it a 2-dimensional feel. Now that CSS3 is gaining wider support, most of this styling and behavior can be done pretty easily.
Downloads and Docs »Demo »

Nice 3D Ribbons Only Using CSS3

CSS3 Buttons
Yes, it is possible to create a simple and nice (3D) layout with some CSS3 properties, only using code and without the help of any graphic editor.
You will be using box-shadow to create a drop-shadow with RGBa, border-radius and the transform property for the single items of the list to make a nice 3D effect.
Downloads and Docs »Demo »

Super Awesome Buttons with CSS3 and RGBA

CSS3 Buttons
Super Awesome Buttons are certainly the Daddy of all the CSS3 buttons above. It was back in April 2009 that ZURB first published this tutorial, and set a high bench-mark for all to follow.
They may look like images, but loading speed and maintainability demonstrate that they are certainly not.
It's a simple button that is made possible by a transparent PNG overlay (for the gradient), border, border-radius, box-shadow, and text-shadow.
Yes, they are so awesome!
Downloads and Docs »Demo »

CSS3 Gradient Generator

CSS3 Buttons
The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS.
CSS gradients generate an image result, meaning the result of a CSS gradient can be used anywhere an image can be used, be it a background-image, mask,border, or list item bullet.
CSS3 Gradient Generator »

CSS3 Generators and Tools from Westciv

CSS3 Buttons
Developers from Westciv offer free to use CSS3 generators, that will not only help with your buttons but with almost every aspect of CSS3.
The tools are:
Linear and Radial Gradients »
Explore CSS gradients (both linear and radial) (an experimental feature in Safari 4, and a proposed addition to CSS3).

Shadows (Text and Box) »
CSS now lets you create drop shadows on text, and on the box of an element. Explore CSS3 transforms (supported in Opera 9, Firefox 3.5 and Safari 1.2 and higher), and box-shadows (supported in Firefox 3.5 and Safari 3.1).

CSS Transforms »
You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. Explore CSS3 CSS Transforms (supported in Opera 10.5, Firefox 3.5 and Safari 4 and higher).

CSS Text Stroke »
You can stroke text with experimental CSS text-stroke, supported in Safari 4.

You might also like…

15 jQuery Plugins for Better Web Page Element Layouts »
10 jQuery Plugins for Easier Google Map Installation »
25 Tutorials and Resources for Learning jQuery UI »
Creating a Web Development Environment using Google Chrome Extensions »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials »