Simply-Buttons v2

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

87 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

Trackbacks/Pingbacks

  1. Simply Buttons « Ajax Freak
  2. links for 2009-11-23 « sySolution
  3. eKini Web Developer Blog » CSS Buttons: Simply Buttons V2
  4. Cross-Browser Javascript/CSS Buttons - Simply-Buttons v2
  5. 網站製作學習誌 » [Web] 連結分享
  6. CSS кнопки – Buttons v2 | Создание сайтов, web программирование
  7. Babelia » Blog Archive » Simply Buttons
  8. 50 Fresh CSS Techniques, Tutorials and Resources - Noupe
  9. 50+ Fresh CSS Techniques, Tutorials and Resources | Programming Blog
  10. 50+ Fresh CSS Techniques, Tutorials and Resources | Graphic Design Pro
  11. 50+ Fresh CSS Techniques, Tutorials and Resources « Graphic Art Source
  12. 50+ Fresh CSS Techniques, Tutorials and Resources | SeanBurdick
  13. 50+ Fresh CSS Techniques, Tutorials and Resources | qface & sowmo sky
  14. CSS Lovers, Web 2.0 Directory and Resources » Blog Archive » 50+ Fresh and Awesome CSS Techniques, Tutorials and Resources
  15. DuRand Jones » 2009-12-05
  16. 50+ Fresh CSS Techniques, Tutorials and Resources | Theme Center
  17. 50+ Fresh CSS Techniques, Tutorials and Resources | Gacik Design Blog
  18. All about Buttons, Buttons … & Buttons (CSS, Glowing, Javascript, Advance) | Ajax CSS and WEB2.0 Resource Directory. Ajax Effects, Components Drag Drop, CSS Gallery, AJAX CSS PHP Tutorial AjaxCSS.com
  19. links for 2009-12-08 « toonz
  20. 50+ Fresh CSS Techniques, Tutorials and Resources | Design-Tut+
  21. Crea botones sencillos y elegantes con Simply-Buttons v2 - Diseño | Zona Windows
  22. Crear botones elegantes con Simply-Buttons v2
  23. Simply Butons v2 with Javascript Enhancements « Jbloo
  24. Diseño Web Galicia : Simply Buttons v2 - Grupo Promedia 2009
  25. Simply-Buttons | KimSo - Creación Multimedia
  26. 15 Tips and Techniques for Styling the button element : Speckyboy Design Magazine
  27. 15 Tips and Techniques for Styling the button element | Programming Blog
  28. 15 Tips and Techniques for Styling the button element | EMDMA
  29. links for 2010-01-02 | hobbes.ch — thomaskeller.ch
  30. 15 Tips and Techniques for Styling the button element | iDESIGN
  31. 15 Tips and Techniques for Styling the button element | Bizimhost.biz
  32. 25+ Tutoriais CSS e jQuery, Recursos e Técnicas
  33. 45 Powerful CSS/JavaScript-Techniques - Smashing Magazine
  34. 45 Powerful CSS/JavaScript-Techniques | Programming Blog
  35. AMB Album » 45 Powerful CSS/JavaScript-Techniques
  36. 45 Powerful CSS/JavaScript-Techniques « Social-Press
  37. 45 Powerful CSS/JavaScript-Techniques | Tutorial51
  38. 45 Powerful CSS/JavaScript Techniques « Extreme Design Studio Blog v4.0
  39. 45 Powerful CSS/JavaScript-Techniques » Shai Perednik.com
  40. 45 Powerful CSS/JavaScript-Techniques | moreInet.com | Webdesign, Graphic Design Service in Pattaya
  41. TechStyle by Jargal.MN » Blog Archive » CSS
  42. 15 Tips and Techniques for Styling the Button Element « Extreme Design Studio Blog v4.0
  43. Sexy Button Quick Start Guide and Demo | Web creative inspiration
  44. 50+ Fresh CSS Techniques, Tutorials and Resources « Oviyas Blog
  45. 35+ Essential Submit Button Enhancements | tripwire magazine
  46. 35+ Essential Submit Button Enhancements | World Wide Web
  47. 35+ Essential Submit Button Enhancements - Programming Blog
  48. 性感按钮快速上手指南以及示范 | 东西
  49. 45 Powerful CSS/JavaScript-Techniques | Top Web Hosts Review Best Web Hosting 2010
  50. 45 Powerful CSS/JavaScript-Techniques - Smashing Magazine | 51Feeling

Leave a Reply