Simply-Buttons v2

» November 11th, 2009 » 92 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.

Be Sociable, Share!

Share

Comments

92 Responses to “Simply-Buttons v2”

  1. great buttons – but I cant help myself, I do net get them centered. Can anyone give a hint?

  2. darki on August 6th, 2010 at 10:10 am
  3. 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

  4. j. millington on August 30th, 2010 at 2:09 pm
  5. 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.

  6. loreley on September 29th, 2010 at 7:30 am
  7. 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

  8. Ian Newlands on November 24th, 2010 at 7:11 pm
  9. I commonly do not submit in Blogs but your blog forced me to, remarkable function.. wonderful …

  10. Arielle Grisby on January 11th, 2011 at 10:20 pm
  11. 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.

  12. Lady Gaga on February 9th, 2011 at 8:06 pm
  13. 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.

  14. darmowe filmy porno on March 1st, 2011 at 6:15 am
  15. 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..

  16. Fredrik on March 6th, 2011 at 9:25 pm
  17. 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.

  18. Gabriel on March 18th, 2011 at 2:06 am
  19. yea why not?

  20. volcano digit vaporizer on March 23rd, 2011 at 6:13 pm
  21. good article, i obviously love this website, keep it.

  22.  on March 30th, 2011 at 10:46 pm
  23. 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?.

  24. Yong Hutcherson on June 23rd, 2011 at 6:58 am
  25. 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!

  26. Hiram Berumen on July 16th, 2011 at 12:43 pm
  27. 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.

  28. selforder on July 27th, 2011 at 8:59 pm
  29. 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?

  30. opt in on August 8th, 2011 at 1:53 pm
  31. I love you site

  32. nod321.ir on August 25th, 2011 at 5:43 am
  33. There is a certain mystique power associated

  34. gift box on September 6th, 2011 at 7:47 am
  35. 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!

  36. langlang33 on September 10th, 2011 at 6:23 am
  37. 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.

  38. sexshop on September 12th, 2011 at 12:17 am
  39. 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

  40. Blake on September 13th, 2011 at 7:32 pm
  41. Straightforward and written well, thanks for the facts

  42. white on September 14th, 2011 at 8:58 pm
  43. 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.

  44. Leif Warlock on November 7th, 2011 at 10:03 pm
  45. Keep working, wonderful job! Exactly the info I had to know.

  46. Johna Arra on January 4th, 2012 at 11:12 pm
  47. 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.

  48. seo on January 31st, 2012 at 9:53 am
  49. Great man!!

  50. Bartosz on June 28th, 2012 at 9:06 am
  51. 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е
    not аlreаԁy ;) Chеers!

  52. buy hcg injections canada on August 23rd, 2012 at 6:36 pm
  53. Thanks for your Simply-Buttons technique. I was tossing up whether to try a straight css solution or a hybrid solution like yours.

  54. Peter Sundstrom on September 18th, 2012 at 7:31 pm
  55. 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.

  56. Stan on October 11th, 2012 at 1:43 pm
  57. Is there possible if I decor button with background-image?

  58. Putri on December 18th, 2012 at 2:15 am
  59. 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

  60. filmy on February 10th, 2013 at 8:49 pm
  61. Hi everyone, it’s my first visit at this website, and post is actually fruitful in favor of me, keep up posting such posts.

  62. elizabeth on March 20th, 2013 at 10:59 pm
  63. I visited many sites however the audio quality for audio
    songs existing at this web page is genuinely marvelous.

  64. nancy on March 21st, 2013 at 10:13 am
  65. I intended to compose you the very small word just to thank you so much over again regarding the wonderful

  66. James Worthy Jersey on April 9th, 2013 at 7:49 pm
  67. 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!

  68. virginia on April 19th, 2013 at 6:36 pm
  69. nmxhxtxyf urmkl dhpjheb eddk xuksjwisiiitezt

  70. links do follow on July 16th, 2013 at 6:04 am
  71. Volvo’s new Pedestrian and Cyclist Detection feature is not only smart enough to make a distinction between the two, it can alert you and brake, if needed, to prevent a crash.

  72. Diag obd2 on December 22nd, 2013 at 9:58 pm
  73. Obdii est classé 49 483 en France. ‘buy cheap auto diagnostic tool,obd diagnostic tool for French car,lexia-3,renault can clip.

  74. obdii on April 9th, 2014 at 6:54 pm
  75. It is the best time to make a few plans for the long run and it
    is time to be happy. I’ve learn this put up and if I could
    I desire to suggest you some attention-grabbing issues
    or tips. Perhaps you can write next articles regarding this article.
    I want to learn more issues about it!

  76. forces of nature promo coupons on April 18th, 2014 at 3:57 am
  77. Hello, i feel that i noticed you visited my site so i
    got here to return the prefer?.I am trying to to find
    issues to improve my site!I suppose its adequate to use some of your ideas!!

  78. illy caffe prmo code on April 18th, 2014 at 9:26 pm
  79. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now
    each time a comment is added I get several emails with the same comment.
    Is there any way you can remove me from that service? Thank you!

  80. royal design code coupons on April 20th, 2014 at 7:58 am
  81. It is good to know that

  82. Renault clip on April 22nd, 2014 at 6:59 pm
  83. Back pain is a desired affect and should be to want to forbidden city just be aware of our introductory exploration here, so getting it over medication.

  84. Norman on May 23rd, 2014 at 10:29 am

Trackbacks/Pingbacks

  1. 45 Powerful CSS/JavaScript-Techniques « wwwba
  2. 45种有用的Css/Javascript技巧 | narco
  3. 跨浏览器的CSS按钮
  4. Diseño Web: 10 colecciones de botones CSS3 listos para usar | Blog Diseño Web
  5. 5 Colecciones de Botones CSS3 | Cuestión de Código - Tús Códigos Hechos Fáciles
  6. 45 Powerful CSS/JavaScript-Techniques - Goodfav Howto
  7. Simply Butons v2 with Javascript Enhancements | tutspond
  8. 45 Powerful CSS/JavaScript-Techniques - Internet Business

Leave a Reply