Simply-Buttons v2
» » 50 Comments
TESTED IE6 IE7 FF(PC/MAC) Safari SafariMobile Opera(PC/MAC)
Background
I had some time a while back and read a few interesting articles on buttons:
These got me thinking… these techniques are pretty nice, but I think they can meet somewhere in the middle and make something even better, after all the button tag was created to make really nice buttons for your sites (W3 Button Element). After a little work I came up with the “Simply-Buttons Technique”.
Benefits
- Buttons size to fit text.
- There are 3 states: Inactive, Active, and Hover.
- They look and behave the same way in every browser and operating system.
- The do not need the javascript to work, they work with just the css
- Way better looking buttons than what anyone else can do with XHTML/CSS, isn’t that reason enough?!
How it Works
The markup is pretty simple, as you can see below. The thing to notice here is that both the button and link tags each have a nested-nested span tag.
<button> <span><span>Button</span></span> </button> <a class="button"> <span><span>Button</span></span> </a>
Now there are two parts involved here, the first thing to know here is that this method will work with just CSS. However it works a little better with some Javascript enhancements. Let’s take a look:
Generic (no javascript)
Now we see the buttons load nicely here, we are using the Sliding Doors Technique. The caveats are:
- There are outlines on the buttons.
- The text is selectable.
- These buttons are not mobile friendly (the button tag).
The Solution
In comes the the Simply-Buttons Javascript component. The library solves the caveats above as you can see below:
YouTube Style (w/ javascript)
Below is the object you can configure to further customize the buttons to suite your design.
options : {
hyperlinkClass : 'button' // 'a' tags with this class will be processed
,activeButtonClass : 'button_active' // Active class for active buttons
,states : { // The various states and css properties, define them as normal
outer : {
active : {
backgroundPosition : 'bottom left'
}
,inactive : {
backgroundPosition : 'top left'
}
}
,inner : {
active : {
backgroundPosition : 'bottom right'
}
,inactive : {
backgroundPosition : 'top right'
}
}
}
,iphone : {
replaceButtons : true // if iPhone; replace buttons with inputs?
}
}
Download the Code/Sample
Below you can download not only the core CSS and Javascript files but you also will get a few samples. I am not the greatest at tutorials so I will update this post as feedback comes in, however there are quite a few comments throughout the files. The important files are: stylesheets/buttons.css, javascripts/simply-buttons-v2.js.
Installation
Simply include the stylesheet and javascript and make sure they can find your images. Then simple call the init function, either using the default options as below or configuring it as show above.
<link rel="stylesheet" type="text/css" href="stylesheets/SimplyButtons.css" media="screen" />
<script type="text/javascript" src="javascripts/SimplyButtons.js"></script>
<script type="text/javascript">
window.onload = function()
{
SimplyButtons.init();
};
</script>
Customize
As shown in the YouTube example, you can easily modify the buttons look and feel. You can do this by creating your own stylesheet and you can use the one supplied as an example, its filled with comments. There are also options that can be changed and configured on the javascript end as show above.
SUPPORT: Feedback and Donations help to support this Plugin and future development.
Good to see updates to this project. Good work, thanks for sharing it with world
No need to have two images for the sprite, you can have just one with both sides! had came up with this same idea a few weeks ago…
Good idea. Thak you…
Another caveat, they don’t resize vertically, so if the user uses text-zoom, has a larger minimum font-size set than expected or they contain enough text that the text wraps then the text either overflows the button or is cut off.
Why do this with javascript when there’s a perfect css solution available.
I’ve got a bug when I click on the button, and release the click outside the button.
I’m using Firefox 3.5.5 under Linux Fedora 11.
(If you need, I could try with other browser/os)
Hope this helps
@Bogdan Pop : I’m ok with the css (I prefer using natural way of work of the browser instead forcing him with some js), but how you deal with rounded corner (specifically ie) ?
Because using a JS plugin that will add specific tag that you would do hard coded is probably better, unless if you have a better solution (and I would be pleased to know, seriously
).
Thanks for the input guys and keep it coming
Some responses below.
@Nik: You are right, but honestly I can’t remember ever making a button with wrapping text or even the last time I saw one? Edge Case?
@Santiago: You are right, in fact I did just that for the YouTube example. The idea is to show off different ways so people can see how to customize them to make them their own.
@Bogdan Pop: The css solution does work well, the js just removes the button outlines, disables the text, and if it is IE changes the press state to what we see and want in other browsers and finally the option with the iPhone to remove the buttons altogether and replace them with inputs. Think of the JS as a Supplement, not necessary but adds a few finishing touches.
@cx42net: If you could try another that would be great, I will also try this out on Fedora as soon as possible to see what is happening there.
Can’t see any valuable reason for realizing buttons this ugly way. there is a much cleaner solution using css only!
Looks great… I miss the pointer “hand” icon though. Maybe add,
cursor: pointer;
to button span’s css?
Thanks for the input again guys! Some more responses below:
@Kel: Definitely, I will add that into the next update!
@Kay and similar: I appreciate your opinion on the topic, however could you post up some links to the stuff you refer too or talk a a little about what you mean? I made these because I couldn’t find anything out there that did everything these do, did I miss a great library?
I haven’t much to say but thanks for your work. I learned a lot looking through it. Without discussing the need for even more .js, I love it as the details, or finishing touches as you put it, are smooth. Thanks again.
@Kay and others like him: If all you can do is talking bullshit in a rather arrogant way you should just shut up.
If you don’t like what Kevin did you’re free to tell him why you think other solutions are better or why you don’t like his solution. Just calling his way “ugly” and saying there are cleaner solutions out there is pathetic. How about providing links to solutions that can do the same (or even more) with CSS only so we all can learn from them?
(( Sorry, Kevin for that rant – I’m just fed up of people acting like they are “oh so awesome” in comments while in reality they can’t do shit on their own ))
@Chris: +1
thanks!
This is excellent! Just what I have been looking for. Will use this in my next project. Thanks!
A very nice solution to this problem – pure CSS is nice, but this hybrid approach is a good compromise.
Will these techniques also work on input elements of the type submit?
@bertgoethals: You can have a button element of type submit yes. However in order to achieve this look and behavior you need the button element, after all, this is what is intended for, better looking buttons than inputs can ever be
Thanks man. It’s easily and beatiful. Best regards.
Nice work!
One wee suggestion would be to leave the link outlines in the :focus state to aid keyboard navigation
Button disabled state is not working.
One of the problems I’ve experienced with putting nested tags inside of the element is that it can cause problems with server side frameworks when a bunch of garbage gets submitted in IE6/7 (since those submit the innerHTML instead of the value).
The way I solved the problem was to move the span’s outside of the button tag, any chance of that happening here?
Dave Shea posted about how to make consistently good-looking CSS buttons last year, but he relies on a couple of extra elements to get that to happen.
http://mezzoblue.com/archives/2008/09/17/anchor_butto/
awsome works, CSS is great but javascript give it a lot more possibilities
This will get rid of the outline on buttons in Firefox.
button::-moz-focus-inner {
border: none;
}
Thanks for taking the time to share this little gem. The buttons look fantastic!
Do you have any images that have transparent background in PNG format? The GIF images supplied in the release package doesn’t work good for sites with dark designs.
Awesome work…
@Davin Studer: Nice! I will take a look at it and if it tests well I will add it in with props
@All Knight Access: There isn’t at the moment, I am looking into the next version supporting transparent pngs but that’s a whole other ball of wax. In the mean time just check out the images and make your own set with the background color you need, the idea here is to make your button design so your buttons can work like these and look the same across the board.
element.style.cursor = ‘default’;
to
element.style.cursor = ”;
In reply to comment 30:
To avoid too much trouble/hacks when using transparent PNGs in an IE7- friendly way, using an approach based in PNG8 can make it just a quick (image) authoring effort.
Keep up the good work!
Great work! It’s an elegant and tidily written solution. Being a developer and not a web designer making things look nice is always a major pain. At least now I’m sorted… button-wise.
Can I ask why haven’t you used jQuery. I know it’s an unnecessary dependancy but it’s so widely used that it’s unlikely to be included just for your button extension.
It would make the code even tidier, options handling and DOM manipulation is a incredibly easy. You could also develop it as a jquery plugin so that I could just call it on any block element myDiv.button(’Save’), something like that.
IE7 problem: The sexy buttons generated with button tags have glitches while rendering on scroll. This happens only in IE7
Wow!! gr8 work, Thanks for sharing!
@Jerry: can you be more specific or provide a url to demonstrate the issue? More than happy to take a look and fix it
I think the ie7 problem jerry was referring to is that horizontal lines occur in the button when scrolling: screenshot: http://alvarsirlin.com/simplybuttons-ie7.png
also, small fyi, the stylesheet in the package says “Simply Buttons, version 1.0″. Not sure if that was an oversight, or the wrong file is in the package. Oh, and thanks for the great work!
Awesome work on these buttons. Could you put the code on Github.com so we can browse it without having to download the zip? That would also let us maintain it for you
It also works in chrome 3!
If you set the brackground-color: transparent on the “buttons”, remove the white areas around the button corners and make them also transparent and put a no-repeat on the background definition of the first span, you should be able to use the buttons on different color backgrounds. Since my forms are on white and light gray bg’s, using the same GIF’s worked out for me .. but for different background colors, you would have to either use PNG’s or create different GIF’s with different transparent values to match your background area. Good job though .. it works very nicely. I haven’t tested this out in IE and frankly I don’t care about IE!
Hi Kevin,
What is the license for this? I’d like to use it in commercial software but want to make sure I’m not violating anything.
Thanks,
Jared
I cannot resist myself implementing these buttons. Thank you dear
Great update. We’ve been using the original buttons over the last 18 months and looking forward to trying out the new styles.
Very cool buttons! Thanks for the code.
Good Job………
Great buttons!
The only issue I had was that they don’t seem to work with keyboard navigation. That is I can’t tab over the button and hit enter to submit.
Great work, thank you fo share
These are fantastic. Thanks!
Loved the post.
I am taking the liberty of adding a reference to your article on my CSS aggregator site. Do let me know if you are ok with this.