Posts Tagged ‘slideshow’

Mobile Toolbox for WordPress (Tutorials, Plugins and Themes)

Mobile browsing clearly does have its limitations, mainly from its smaller physical design, but it also limited by web sites not having a mobile version tailored for the smaller screen. Current mobile web browsing stats stands at 4.5% of total world-wide internet usage and, with the prediction for the next five years being that more users will connect to the internet over mobile devices than desktop computers, it is now time to act and make your website mobile friendly.

Of course, it does depend on the size and complexity of your site, but creating a mobile version of your site does neither have to be over-expensive nor very time-consuming, especially if your site has been built using WordPress. As everybody knows, WordPress is by far and away the most popular CMS, and with it comes a thriving community of designers and developers that constantly push its boundaries further and ever-more improving its functionality. Its community has realized for some time that the mobile phenomenon has been coming, and as such does have a multitude of themes, plugins and resources available that will help you create a mobile version of your site with the minimum of fuss.

In this article, Mobile Toolbox for WordPress, we highlight themes (free and premium), plugins and easy-to-follow tutorials that will help you create a mobile version of your site.

iPhonsta 1.1

iPhonsta 1.1iPhonsta 1.1
Despite its name iPhonsta does not exclusively only work on the iPhone, it works on most mobile devices, like Android, Palm Pre and Blackberry. The theme has a fluid layout, configures the font size automatically and is WordPress 3 compatible.
iPhonsta Home →View the Demo →

Smooci 2

Smooci 2Smooci 2
This basic free theme works in conjunction with the Smooci (WordPress on Mobiles) plugin which is used to display the mobile optimised theme when your WordPress site is visited via a mobile device.
Smooci 2 Home →View the Demo →

WordPress Mobile Theme

WordPress Mobile ThemeWordPress Mobile Theme
This is a minimalistic and lightweight theme that will fit perfectly with all the mobile phones resolutions. The three key features of this theme are: You can choose your own theme color from the theme options; The theme can have 100% width if you want the theme to fit on every mobile phone, or you can define a fixed width in pixels to target special users; The front page will dynamically create thumbnails for your posts.
WordPress Mobile Theme Home →View the Demo →

jQuery Mobile

jQuery Mobile
Built with the incredible jQuery Mobile plugin, this theme is perfect for those who want to make a good looking and easy to read version of their blog. It uses most of jQuery Mobile features to guarantee an optimal ease of reading on mobile devices such as the iPhone, Blackberry or Android.
jQuery Mobile Home →View the Demo →

Mobius

MobiusMobius
Mobius is a feature rich free theme that is compatible with all touchscreen mobile phones (iPhone & iPod Touch, Android, BlackBerry, Windows Phone, Palm Pre, Symbian…). It comes packaged with three variations (Sky Blue, Amethyst & Rain Forest), its widget ready, native support of non-web fonts (@font-face) and also has optional Twitter and Facebook icons.
Mobius Home →

The dotMobi WordPress Mobile Pack

The dotMobi WordPress Mobile PackThe dotMobi WordPress Mobile Pack
The dotMobi WordPress Mobile Pack is a complete toolkit from dotMobi to help mobilize your WordPress site and blog.
It includes a mobile switcher to select themes based on the type of user that is visiting the site, a selection of mobile themes, extra widgets, device adaptation and a mobile administration panel to allow users to edit the site or write new posts when out and about.
The dotMobi WordPress Mobile Pack →

Carrington Mobile

Carrington MobileCarrington Mobile
Carrington Mobile is an elegant mobile theme with that supports advanced touch browsers (iPhone, Android, BlackBerry, Pre) and is also backward compatible with older mobile devices.
Carrington Mobile Home →View the Demo →

touchPress

touchPress
A beautiful 4 in 1 theme (Blackboard, Wood, Leather, Nature), with 2 widget ready areas, gestures based navigation and auto-resizes images. Automatic detection if a user visits your website from an iPhone and iPod touch, thanks to its built-in plugin that comes packed with the theme.
Price: $22
touchPress Home →

1ST Giant Leap

1ST Giant Leap
1stGiantLeap Mobile is a HTML5 /CSS3 template tuned to look perfect in mobile browsers. The markup is device orientation (landscape/portrait) sensitive, so when you change device orientation by rotating it 90 degrees CW or CCW this template will look nice.
Price: $15
1ST Giant Leap →

WPtouch 2.0 Pro

WPtouch 2.0 Pro
WPtouch 2.0 Pro allows you to setup a feature-rich and fast version of your website for touch-mobile devices with just a few clicks. It does come packaged with a wide variety of pre-built themes, or you could build your own custom theme with WPtouch’s Skeleton theme template. It scales post images, captions and videos automatically and breaks up content with ‘Load More’ links that use ajax to make browsing easier for visitors.
Price: Its FREE for the basic version, $39 for Pro, $69 for the Pro 5 pack and $199 for the full developer pack.
WPtouch 2.0 Pro Home →

Mobility WordPress Theme for Web and iPad

Mobility WordPress Theme for Web and iPad
Mobility is an iPad-ready WordPress theme with finger sliding capabilities and a custom drag-and-drop gallery admin. Both the regular and iPad versions have seven color options and the choice between a single or three-way JavaScript slider on the homepage. The iPad version can switch between portrait and landscape mode upon rotation.
Price: $30.
Mobility WordPress Theme for Web and iPad Home →View the Demo →

WordPress Mobile Theme Framework from Obox

WordPress Mobile Theme Framework from Obox
Obox Mobile is a WordPress Mobile Theme Framework that gives your site a unique and beautiful layout which is compatible for mobile devices. Obox Mobile comes packaged with two Obox Themes (MobiLight & MobiDark) as well as WooMobile from WooThemes.
We currently use Obox Mobile for Speckyboy.
Price: $50.
WordPress Mobile Theme Framework Home →View the Demo →

Simple Mobile

Simple Mobile
Simple Mobile is feature-rich theme that works parallel with another theme and presented to mobile users only. It comes with 8 color schemes, collapsible multi-level menu, WP 3.0 custom menus support, 43 social media icons, a slick Twitter implementation (optimized for speed) and much more.
Price: $20.
Simple Mobile Home →View the Demo →

PadPressed

PadPressed functions as a WordPress plugin and allows publishers to take their content and make it perfectly formatted for the iPad. The most important aspect of PadPressed is its 100% design for the tablet touch experience. Each skin plays to a specific touch dynamic. SwipePad focuses on swiping to advance and a swipe featured slider. It notices the orientation (portrait or landscape) of a reader’s iPad.
Price: $49 for a single license and $149 for a developer license.
VIDEO
PadPressed Home →View the Demo →

My Mobile Page

My Mobile Page
The My Mobile Page WordPress Theme is a minimal mobile WordPress theme with a modern look and a lot of cool features. This theme can be used for personal mobile pages, web designers mobile pages, artists mobile pages and many other. The theme use automatic resolution detection so you can use for small screen resolutions and bigger resolutions.
Price: $20
My Mobile Page Home →View the Demo →

On Demand Mobile

On Demand Mobile
This is a joint collaboration between WPtap (plugin developers) and Press75 (theme developers) to release a mobile version of the video theme On Demand, providing a fully featured video solution for mobile platforms.
Price: On Demand Mobile for $49, or with On Demand iPad for $90.00
On Demand Mobile Home →View the Demo →

Tap News – iPhone App Style Mobile Theme

Tap News - iPhone App Style Mobile Theme
Tap News is an iphone-app style mobile plugin/theme package that instantly converts your wordpress site into a mobile web-application experience. It is specially designed for iPhone/iPod touch, Android, and Blackberry touch mobile device. The theme features elegant iPhone-style sliding layout, and it will truly turn your site into a mobile application. Other features include thumbnail pictures, full support for twitter, social bookmarking, and email.
Price: $49
Tap News Home →View the Demo →

iBusiness iPhone-iPod Template

iBusiness iPhone-iPod Template
iBusiness is a website template designed especially for the iPhone/iPod. It comes with 9 different themes, 3 page templates, 3 widget areas, PSD source files, Twitter stream, and much more.
Price: $15.
iBusiness Home →View the Demo →

Video Theme for iPhone & Android

Video Theme for iPhone & Android
The Video Tube theme is specifically designed for video blogging and content sharing on your mobile site. It fully supportsthe iPhone/iPod Touch, Android, and touch-based Blackberry devices.
With all WordPress features and customized insertion functions, it makes adding Youtube and MP4 videos to your mobile site exetremely easy.
Price: $49.
Video Theme Home →View the Demo →

SOFA iBloggr

SOFA iBloggr
Sofa iBloggr perfectly fits to the iPhones 320px wide screen without the need for screen orientation switch. You can easily turn this theme into Blog + Flickr + Twitter mashup. iBloggr supports widgets, it has a built-in Plugger system, almost everything can be controlled from theme options page – including quick translation table, image size, Post excerpt length…
Price: $15.
SOFA iBloggr Home →View the Demo →

News Press Mobile Theme

News Press Mobile Theme
The News Gallery theme is designed with the photography blogger in mind featuring frontpage slideshow, thumbnail picture and gallery style layout options. It is the perfect choice for image-centric and magazine style WordPress websites. It comes with six stylish colors designed to fit your sites’ unique profile and style.
Price: $49
News Press Mobile Theme Home →View the Demo →

iWorld

iWorld
iWorld is a jQuery powered feature-rich mobile theme. It comes with 10 color schemes, built-in slider & contact form (including validation plugin), Twitter & Flickr widget, a selection of social icons and comes with PSD source.
Price: $25.
iWorld Home →View the Demo →

Video Elements Mobile

Video Elements Mobile
Video Elements Mobile Home →View the Demo →

WordPress Mobile Plugins

MobilePress – Enable The Mobile Web →
MobilePress is a free open source plugin that is flexible in that it allows you to customize your mobile presence by creating your own themes, creating themes for specific mobile browsers (iPhone and generic devices) and also allowing you to decide when to display your mobile blog.

WPmob Lite →
WPmob automatically transforms your WordPress blog into an iPhone application-style theme, complete with ajax loading articles and effects, when viewed from an iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch and BlackBerry Storm/Torch mobile devices. The admin panel allows you to customize many aspects of its appearance, and deliver a fast, user-friendly and stylish version of your site

WP Mobile Detector →
WP Mobile Detector is a simple plugin that automatically detects standard and advanced mobile devices and displays a compatible WordPress mobile theme.

Mobile Kit →
MobileKit is a small WordPress plugin created to make the development of WP mobile themes and apps simple, allowing theme designers to create more immersive user experiences across platforms and devices.

BAAP Mobile Version →
The BAAP Mobile Version is a complete toolkit to help mobilize your WordPress site and blog.
It includes a mobile switcher to select themes based on the type of user that is visiting the site, a selection of mobile themes, extra widgets, device adaptation and a mobile administration panel to allow users to edit the site or write new posts when out and about.

BuddyPress Mobile →
This is a Mobile BuddyPress theme that has been optimized for viewing onthe iPhone and iPod Touch, and will also work on Android and some Blackberry devices.

WordPress Mobile Tutorials

Mobile WordPress Theming →
In this four part tutorial series, from Mobile Tuts+, you will learn how to create a powerful mobile WordPress theme that can be applied to your blog making the site easily accessible to mobile users.
Mobile WordPress Theming: Day 1 →
Mobile WordPress Theming: Day 2 →
Mobile WordPress Theming: Day 3 →
Mobile WordPress Theming: Day 4 →

Making your WordPress Blog Android and iPhone Friendly →
This article is intended for those who already have a web or WordPress background. If you don’t quite understand how to put together your own templates, this detailed tutorial may not for you.

Mobile Browser Detection →
This tutorial covers everything you will need to know about mobile browser detection covering a spectrum of various options, including a WP solution and a PHP solution.

Redirect Mobile Users to a Mobile WordPress Theme →

Detect Mobile Browsers – Mobile User Agent Detection →
This PHP function lets you choose how to manage your mobile visitors, they can be redirected to a page built for mobiles or you can use it to decide which markup language and stylesheet to show that user.

Add a Mobile Landing Page to Your Site →
This tutorial isn’t about creating an entire mobile version of your site, instead it is a means of offering a quick introduction to visitors from the mobile world before passing them through through to your main site.

You might also like…

WordPress Shopping/Ecommerce Toolbox (Plugins and Themes) →
30 Grid-Based WordPress Themes →
40 More Stylish, Minimal and Clean Free WordPress Themes →
20+ Free and Stylish Typography WordPress Themes →
30 Brand New Quality WordPress Themes →
10 Blank/Naked WordPress Themes Perfect for Development →
25 Fresh, Clean and Unique WordPress Themes →
40 Awesome and Fresh WordPress Themes →
Essential WordPress Plugin Development Resources, Tutorials and Guides →
20+ Powerful WordPress Security Plugins and Some Tips and Tricks →


Free Slideshow Plugins For WordPress – Best of

Slideshow is a brilliant method to stack and present series of items (such as images) in your website especially when space is a constraint. It is also commonly used by webmasters and bloggers to showcase portfolios, artwork, products, latest posts, etc. It saves time and efficiently draw visitors’ attention.

shutter reloaded Free Slideshow Plugins For Wordpress   Best of

In WordPress, installing and adding slideshow to posts can be done in a breeze, thanks to developers among the WordPress community. We’ve ran through all WordPress slideshow plug-ins we can possibly find and compiled this list of best and free WordPress slideshow plug-ins.

We hope it will come in handy for you whenever you feels like putting up one. Full list after jump!

NextGEN Gallery

Full integrated WordPress Image Gallery plugin with tons of interesting features like uploading images via compressed zip file, able to import meta files (EXIF, IPTC or XMP), watermaking images, thumb generating and more. Add-on: NextGEN-FlashViewer – Adobe Flash Plugins from for NextGEN Gallery, NextGEN-ImageFlow- picture gallery for NextGEN Gallery.
Demo | Download

NextGEN Monoslideshow Free Slideshow Plugins For Wordpress   Best of

Page Flip Image Gallery

Image gallery with page flip effect.
Demo | Download

page flip gallery Free Slideshow Plugins For Wordpress   Best of

Featured Content Gallery

Creates an automated rotating image gallery of your posts or pages for use anywhere within your theme.
Demo | Download

Featured Content Gallery Free Slideshow Plugins For Wordpress   Best of

kPicasa Gallery

Displays your Picasa Web Galleries in a post or in a page simply by creating a post or a page with a special keyword.
Demo | Download

kPicasa Gallery Free Slideshow Plugins For Wordpress   Best of

Shutter Reloaded

Image viewer for WordPress that works similarly to Lightbox, Thickbox, etc. Supports all standard features like image resizing, preloading images, etc. Does not require any external libraries.
Demo | Download

shutter reloaded Free Slideshow Plugins For Wordpress   Best of

Grand Flash Album Gallery

Full integrated (flash skin based, slideshow) Image Gallery plugin with a powerfull admin back end.
Demo | Download

Grand Flash Album Gallery Free Slideshow Plugins For Wordpress   Best of

Yet Another Photoblog

Convert WordPress blog into full feature photo blog with easy usable photo management system. Comes with several additional plugins to enhance your photoblog.
Demo | Download

Yet Another Photoblog Free Slideshow Plugins For Wordpress   Best of

Dynamic Content Gallery

Creates a dynamic gallery of images for latest or featured content selected from one or more normal post categories, pages, Custom Post Type posts, or a mix of these.
Demo | Download

Dynamic Content Gallery Free Slideshow Plugins For Wordpress   Best of

WordPress Content Slide

Create fully customizable jquery Fading image slideshow anywhere within your WordPress site.
Demo | Download

WordPress Content Slide Free Slideshow Plugins For Wordpress   Best of

Lazyest Gallery

Upload your images via FTP, and Lazyest Gallery will index your images automatically.
Demo | Download

Lazyest Gallery Free Slideshow Plugins For Wordpress   Best of

Meteor Slides

Create slideshows with WordPress by adding a custom post type for slides.
Demo | Download

meteor slide Free Slideshow Plugins For Wordpress   Best of

Lightview Plus

Seamless integration of Lightview to create a nice overlay to display images and videos
Demo | Download

Lightview Plus Free Slideshow Plugins For Wordpress   Best of

Slideshow Gallery

JavaScript powered slideshow gallery that is flexible with all aspects can easily be configured
Demo | Download

Slideshow Gallery Free Slideshow Plugins For Wordpress   Best of

Cleaner Gallery

Integrate with many Lightbox-type scripts (Lightbox, Slimbox, Thickbox, Lightview, Shutter Reloaded, prettyPhoto, etc) and allow you to do much cooler things with your galleries using the shortcode.
Demo | Download

Cleaner Gallery Free Slideshow Plugins For Wordpress   Best of

Lightbox Gallery

Turns all gallery photos into lightbox view.
Demo | Download

LightBox Free Slideshow Plugins For Wordpress   Best of

DM Albums

Displays images and thumbnails perfectly sized to your blog. Allow visitors to view entire album without leaving the post.
Demo | Download

dm albums Free Slideshow Plugins For Wordpress   Best of

SlideDeck Content Slider

Create managable dynamic content slider in WordPress template or post easily without writing a single code.
Demo | Download

slidedeck Free Slideshow Plugins For Wordpress   Best of

Slideshow Gallery Pro

Photo and image viewing plug-in that integrates seemlessly with the WordPress image upload and gallery system.
Demo | Download

slideshow gallery pro Free Slideshow Plugins For Wordpress   Best of

More

  • WP Slideshow – Photo slideshow player that can be used on any kind of WordPress blog, including photographer and designer portfolios, real estate and other business websites, all sorts of picture galleries and product pages. (premium)
  • Fotobook – Link to your Facebook account and import all of your photo albums to WordPress.
  • Picasna – Create gallery from your Picasa album with ease.
  • Flickr + Highslide – Displays your flickr photos using Highslide JS.
  • Flickr slideshow wrapper – Yet another plugin that calls Flickr albums into your content.
  • Slideshow – A plugin previously developed for New theme, that pulls image attachments and formats them into slideshow.
  • SuperSlider-Show – A gallery plug-in powered by Mootools, build upon Slideshow2 that is highly customizable.

Did we missed any good WordPress slideshow plugins? Let us know in comments!

(bellefoong)

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 →


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 »


Competition: Two Free WordPress Development Books for Two Lucky Readers, Comment to Win

This week we have a great competition for you, especially if you are a WordPress developer or are currently learning WP, you’ll really love it. We have 2 copies of each WordPress 3.0 jQuery and WordPress Top Plugins PDF ebooks to give away to two lucky readers. All you have to do for a chance of winning these essential ebooks is leave a comment below saying anything you want, and I mean anything! We do encourage a little bit of humor, but as winners are chosen at random, it will have no baring on the outcome.

WordPress 3.0 jQuery

WordPress 3.0 jQueryThis easy-to-use guide will walk you through the ins and outs of creating sophisticated, professional enhancements and features, specially tailored to take advantage of the WordPress personal publishing platform. It will walk you through clear, step-by-step instructions to build several custom jQuery solutions for various types of hypothetical clients and also show you how to create a jQuery and WordPress Plugin.This book covers step-by-step instructions for creating robust and flexible jQuery solutions for today’s top site enhancements: expanding/sliding content, rotating slideshows and other animation tricks, great uses of jQuery’s UI plugin widgets as well as AJAX techniques. Along with these it will also show you best practices for jQuery and WordPress development.

You can also download a sample chapter, by clicking here: Chapter 3 – Digging Deeper: Understanding jQuery and WordPress Together.

WordPress Top Plugins

WordPress Top PluginsA WordPress plugin is a collection of files (PHP, javascript, css) that creates a small feature or modification to your WordPress blog. WordPress Top Plugins will teach you to add these plugins to an already built base WordPress site, and customize them where applicable.
This book will walk you through finding and installing the best plugins for generating and sharing content, for building communities and reader base, and for generating real advertising revenue.
There is literally a plugin for almost anything you want to achieve in WordPress.

You can also download a sample chapter, by clicking here: Chapter 2 – Generating Content.

How to win these books

This competition will run for the next 7 days, and all you have to do for a chance to win both copies is leave a comment below telling us anything you want (remember, we do love some humor!) The winners will be selected at random and will be informed directly after the competition ends via email. Good luck to everyone :)