This is an easy to implement framework of CSS3 buttons, icon buttons & dropdown menu buttons that look great in Firefox & WebKit-based browsers, and the fall-back styles work and look rather good in other browsers too.
The dropdown menu button uses jQuery to toggle the sub menu, the rest is all CSS and an image sprite for the icons.
<link rel="stylesheet" href="css/skin/css3-buttons-grey.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/css3-buttons.css" type="text/css" media="screen">
If you wish to use the Dropdown Menu Buttons, you'll need to add this jQuery snippet in the <head></head> section of your HTML page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Toggle the dropdown menu's
$(".dropdown .button").click(function () {
$(this).parent().find('.dropdown-slider').slideToggle('fast');
$(this).find('span.toggle').toggleClass('active');
return false;
});
}); // END document.ready
// Close open dropdown slider/s by clicking elsewhwere on page
$(document).bind('click', function (e) {
if (e.target.id != $('.dropdown').attr('class')) {
$('.dropdown-slider').slideUp();
$('span.toggle').removeClass('active');
}
}); // END document.bind
</script>
I will in the future be creating and releasing new skins, but if you wish to do so yourself (use a different icon sprite and/or different colors for your buttons), you would simply create a new skin stylesheet and save it to css/skin/my-nice-skin.css, and modify the following styles:
a.ddm span.icon, a.button span.icon {
/*Location of your new sprite, or just use an existing one*/
background-image: url(../../images/button-sprite-grey.png);
}
a.button {
color: #484848 !important;
border: solid 1px #7f7f7f;
}
a.button:hover, a.button.negative:hover, a.button.positive:hover {
color: #282828 !important;
border: solid 1px #333;
}
div.dropdown-slider {
border-right: solid 1px #7f7f7f;
border-bottom: solid 1px #7f7f7f;
border-left: solid 1px #7f7f7f;
}
div.dropdown-slider a.ddm {
color: #484848 !important;
border-bottom: 1px solid #7f7f7f;
}
div.dropdown-slider a.ddm:hover {
color: #282828 !important;
}
Once you have created and uploaded your stylesheet, replace the default skin stylesheet with yours:
<link rel="stylesheet" href="css/skin/my-nice-skin.css" type="text/css" media="screen">
The framework currently has these two skins:
<link rel="stylesheet" href="css/skin/css3-buttons-black.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/skin/css3-buttons-grey.css" type="text/css" media="screen">
Note: your buttons should be placed within a wrapper element (e.g. <div>) with class name "buttons"; Alternatively you can ditch the .buttons wrapper and just simply add a markup tag with style="clear:both;", which works but is not recommended, below your buttons.
Example:
<div class="buttons"> <a href="#" class="button left"><span class="label">Left</span></a> <a href="#" class="button middle"><span class="label">Middle</span></a> <a href="#" class="button right"><span class="label">Right</span></a> </div> <!-- /.buttons -->
OR
<a href="#" class="button left"><span class="label">Left</span></a> <a href="#" class="button middle"><span class="label">Middle</span></a> <a href="#" class="button right"><span class="label">Right</span></a> <br style="clear:both;" />
To create a button, all you need do is:
<a href="#" class="button"><span class="label">Button</span></a>
The result:
To create an icon, all you need do is:
<a href="#" class="button"><span class="icon icon12">Label</span></a> <!-- Add a hidden label within the span for SEO (if you wish) -->
The result:
There are 100 icons available, and their classes are .icon1 — .icon100
To create an icon with a visible label, all you need do is:
<a href="#" class="button"><span class="icon icon30"></span><span class="label">Logout</span></a>
The Result:
You can create grouped buttons that are linked together, by using the .left, .middle and .right classes:
<a href="#" class="button left"><span class="label">Left</span></a> <a href="#" class="button middle"><span class="label">Middle</span></a> <a href="#" class="button right"><span class="label">Right</span></a>
The result:
If you have a button that triggers an action you want to highlight, you can give a button a .positive or .negative class and the hover-state will change to green or red:
<a href="#" class="button left positive"><span class="icon icon1"></span><span class="label">Add</span></a> <a href="#" class="button middle"><span class="icon icon2"></span><span class="label">Edit</span></a> <a href="#" class="button right negative"><span class="icon icon3"></span><span class="label">Delete</span></a>
The result:
To create a dropdown menu button, all you need do is:
<div class="dropdown"> <a href="#" class="button"><span class="label">File</span><span class="toggle"></span></a> <div class="dropdown-slider"> <a href="#" class="ddm"><span class="label">New</span></a> <a href="#" class="ddm"><span class="label">Save</span></a> </div> <!-- /.dropdown-slider --> </div> <!-- /.dropdown -->
The result:
You may wish to use icons in your dropdown menu buttons or highlight an action, to do this:
<div class="dropdown">
<a href="#" class="button"><span class="icon icon5"> </span><span class="label">File</span><span class="toggle"> </span></a>
<div class="dropdown-slider">
<a href="#" class="ddm positive"><span class="icon icon1"> </span><span class="label">Add</span></a>
<a href="#" class="ddm"><span class="icon icon2"> </span><span class="label">Edit</span></a>
<a href="#" class="ddm negative"><span class="icon icon3"> </span><span class="label">Trash</span></a>
</div> <!-- /.dropdown-slider -->
</div> <!-- /.dropdown -->
The result:
You can create grouped dropdown menu buttons that are linked together, by using the .left, .middle and .right classes. These classes need to be specified twice within the .dropdown block as follows:
<div class="dropdown left"> <!-- (1) -->
<a href="#" class="button left"> <!-- (2) -->
<span class="icon icon5"></span>
<span class="label">File</span>
<span class="toggle"></span>
</a>
<div class="dropdown-slider">
...
To create a dropdown menu button group, all you need do is:
<div class="dropdown left">
<a href="#" class="button left"><span class="icon icon5"></span><span class="label">File</span><span class="toggle"></span></a>
<div class="dropdown-slider">
<a href="#" class="ddm"><span class="icon icon1"></span><span class="label">Add</span></a>
<a href="#" class="ddm"><span class="icon icon2"></span><span class="label">Edit</span></a>
<a href="#" class="ddm"><span class="icon icon3"></span><span class="label">Trash</span></a>
</div> <!-- /.dropdown-slider -->
</div> <!-- /.dropdown -->
<div class="dropdown middle">
<a href="#" class="button middle"><span class="icon icon36"></span><span class="label">Options</span><span class="toggle"></span></a>
<div class="dropdown-slider">
<a href="#" class="ddm"><span class="icon icon10"></span><span class="label">Profile</span></a>
<a href="#" class="ddm"><span class="icon icon24"></span><span class="label">Inbox (3)</span></a>
<a href="#" class="ddm"><span class="icon icon34"></span><span class="label">Settings</span></a>
<a href="#" class="ddm negative"><span class="icon icon30"></span><span class="label">Logout</span></a>
</div> <!-- /.dropdown-slider -->
</div> <!-- /.dropdown -->
<div class="dropdown right">
<a href="#" class="button right"><span class="icon icon73"></span><span class="label">World Regions</span><span class="toggle"></span></a>
<div class="dropdown-slider">
<a href="#" class="ddm"><span class="label">The Americas</span></a>
<a href="#" class="ddm"><span class="label">Europe & Eurasia</span></a>
<a href="#" class="ddm"><span class="label">Africa / Middle East</span></a>
<a href="#" class="ddm"><span class="label">East Asia & The Pacific</span></a>
<a href="#" class="ddm"><span class="label">South & Central Asia</span></a>
</div> <!-- /.dropdown-slider -->
</div> <!-- /.dropdown -->
The result:
Side note:
Simplicity is important in user interface design. The more controls you display on the screen at any time, the more time your users will have to spend figuring out how to use your interface. When there is less choice, the available functions become more apparent and are easier to scan. Simplifying an interface isn't easy though, especially if you don't want to limit the app's functionality.
One way of making things simpler is to hide or conceal advanced functionality. Find out the most commonly used functions of your interface and tuck away the rest. You can do this with pop-up / dropdown menus and controls. If users need those extra controls, they can enable them with just a couple of clicks. Deciding what to keep and what to conceal isn't a simple task, and will depend on how important and how frequently each of the controls is used.
And now, down to business:
<div class="buttons">
<div style="float: left;">
<a href="#" class="button left"><span class="icon icon16">Home</span></a>
<a href="#" class="button right"><span class="icon icon6">Save</span></a>
<a href="#" class="button left"><span class="icon icon1">New</span></a>
<a href="#" class="button middle"><span class="icon icon2">Edit</span></a>
<a href="#" class="button right"><span class="icon icon3">Trash</span></a>
</div> <!-- /.left -->
<div style="float: right;">
<a href="#" class="button left"><span class="icon icon12">Profile</span></a>
<a href="#" class="button middle"><span class="icon icon24">Inbox</span><span class="label"> (3)</span></a>
<div class="dropdown middle">
<a href="#" class="button middle"><span class="icon icon34"></span><span class="label">Settings</span><span class="toggle"></span></a>
<div class="dropdown-slider">
<a href="#" class="ddm"><span class="icon icon81"></span><span class="label">Currencies</span></a>
<a href="#" class="ddm"><span class="icon icon37"></span><span class="label">Preferences</span></a>
<a href="#" class="ddm"><span class="icon icon73"></span><span class="label">Region Setup</span></a>
</div> <!-- /.dropdown-slider -->
</div> <!-- /.dropdown -->
<a href="#" class="button right"><span class="icon icon30">Logout</span></a>
</div> <!-- /.right -->
</div> <!-- /.buttons -->
The result:
This icon set was designed by Sarfraz Shoukat.
Browser Support: Firefox, Chrome, Safari, IE8+
This work is licensed under a Creative Commons Attribution 3.0 Unported License.
You are free:
If you wish to develop further on these buttons, please remember to share with the web design community so we can all benefit!