Simply-Buttons v2
» » 84 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.
great buttons – but I cant help myself, I do net get them centered. Can anyone give a hint?
not certain as i’m running a “fake” version of IE6 (IE Collection: http://finalbuilds.edskes.net/iecollection.htm), but the hover states don’t appear to work in IE6
there’s a one pixel alignment issue in FF 3.5 – put a button and an html link on the same line and you can notice they’re not vertically aligned properly.
I like what you have done with simply buttons. It looks great. I saw on another site an animated loading link after clicking the submit button on forms. Is this something you have considered? The following example looks pretty good!
http://www.htmldrive.net/items/show/194/Simple-Interactive-CSS-Button-with-jQuery.html
I commonly do not submit in Blogs but your blog forced me to, remarkable function.. wonderful …
Very first of all many thanks a good deal for your helpful and useful insight. I’ve just been searching for some ideas about the development and almost everything what’s associated with it and accidentally We have observed this your entry. Well, this internet site is very super and full of different and attractive critical information about every little thing. Many thanks a good deal one a lot more time for your first class and informative write-up and maintain up publishing these super posts inside the future too.
Thanks for making the sincere attempt to speak about this. I feel very robust approximately it and wish to learn more. If its OK, as you gain more extensive knowledge, may you thoughts adding more articles very similar to this one with more information? It could be extremely useful and useful for me and my friends.
a.button:visited span {
[....]
background-repeat: no-repeat;
}
this adds possibilities for transparent edges (useful when the background is not white).
nice integration otherwise, ugly check and cross symbols default though..
Note that IE 6 and 7 have a bug where the values of ALL “button” elements are sent (as opposed to “input” with type submit). So if you need to check which button was pressed, don’t use this technique.
yea why not?
good article, i obviously love this website, keep it.
I’ve been trying everything and unfortunately they won’t work. I tried posting a playlist in my wordpress in the ‘Pages’ section but the playlist won’t show. Can someone please help with this?.
Wonderful post but I was wanting to know if you could write a litte more on this subject? I’d be very thankful if you could elaborate a little bit further. Thanks!
Throughout the grand design of things you actually receive an A+ just for effort. Where you lost me personally was in the facts. As it is said, the devil is in the details… And that couldn’t be much more true right here. Having said that, permit me inform you just what did work. The authoring is quite persuasive and this is possibly the reason why I am taking the effort to opine. I do not make it a regular habit of doing that. Secondly, whilst I can see the jumps in logic you come up with, I am definitely not certain of exactly how you seem to unite your points which inturn make the conclusion. For right now I will subscribe to your issue but wish in the near future you actually link the facts better.
I’ve been absent for some time, but now I remember why I used to love this blog. Thanks, I’ll try and check back more often. How frequently you update your web site?
I love you site
There is a certain mystique power associated
Outstanding read, I just passed this onto a colleague who was performing some research on that. And he just purchased me lunch because I found it for him smile Therefore let me rephrase that: Thanks for lunch!
Its such as you learn my mind! You appear to grasp so much approximately this, like you wrote the guide in it or something. I feel that you could do with a few percent to force the message home a bit, however other than that, that is fantastic blog. A great read. I’ll certainly be back.
Maybe you have considered putting more video clips in your blog posts to help keep the readers extra interested? I mean I just read over the article of yours and it was very fine consider I’m more of a visual learner,I found that being more valuable. Just my my idea, Good luck
Straightforward and written well, thanks for the facts
Hmm it looks like your blog ate my first comment (it was super long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog. I too am an aspiring blog writer but I’m still new to the whole thing. Do you have any points for rookie blog writers? I’d genuinely appreciate it.
Keep working, wonderful job! Exactly the info I had to know.
Simply desire to say your article is as surprising. The clearness in your post is simply nice and i could assume you’re an expert on this subject. Well with your permission allow me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please keep up the enjoyable work.
Great man!!
I dо nοt even knoω how І endеd up hеre, but
ӏ thοught thiѕ pоѕt was good.
I don’t know who you are but certainly you’ге going tо a fаmοuѕ blοggeг if yοu arе
Chеers!
not аlreаԁy
Thanks for your Simply-Buttons technique. I was tossing up whether to try a straight css solution or a hybrid solution like yours.
Good article, but why use javascript and the button tag? Why not just use the a element and use CSS positioning to make the :hover effect? I really hate adding javascript for little things like this that can be handled via CSS.
Is there possible if I decor button with background-image?
I just couldn’t leave your web site before suggesting that I extremely loved the standard information an individual provide in your visitors? Is gonna be back ceaselessly in order to inspect new posts
Hi everyone, it’s my first visit at this website, and post is actually fruitful in favor of me, keep up posting such posts.
I visited many sites however the audio quality for audio
songs existing at this web page is genuinely marvelous.
I intended to compose you the very small word just to thank you so much over again regarding the wonderful
Very nice post. I just stumbled upon your blog and wanted to say that
I’ve truly enjoyed surfing around your blog posts. In any case I will be subscribing to your rss feed and I hope you write again very soon!