SuperButtons is a WordPress plugin that lets You create sleek and stylish web buttons for Your website.
Easy to use
You don’t need any technical knowledge to create awesome web buttons – it’s as easy as creating a simple text link. You don’t need Photoshop or any other image editing software!
Works everywhere
SuperButtons work in all major browsers and degrade gracefully in older browsers – which means that they look great everywhere!
It’s scalable
Which simply means: the buttons can be any size, any color, any style. You can go crazy and even style the button like this:
Features:
- Create buttons easily – just click the “Create a SuperButton” button in Your WordPress toolbar.
- Scalable – buttons can be any size, any content, any style
- Doesn’t require Photoshop or any othe image editing software
- Works in all major browsers
- Add images to your buttons. Like this:
- Use it in Your theme or plugin – just call the create_superbutton() function to create a sleek web button anywhere in Your theme or plugin!
- Customize link title attribute
- Choose from the 10 predefined syles or create Your own!
Showcase:
Just a few examples of what SuperButtons can do!
How it works
SuperButtons work by automatically generating HTML code for a cool button. The gradients and rounded corners are created with pure CSS for browsers that support it (all modern browsers except IE), and with javascript and html canvas element for those that don’t (all IE and older versions of other browsers).
This means that the You’ll have rounded customizable, liquid web 2 style buttons in every browser. There are limitations however: because Internet Expolrer is awfully slow rendering canvas with javascript, I had to limit the maximum number of rounded buttons on a single page to 5 in IE 8 and 2 in IE7 and below. If there are more buttons, they will just be without rounded corners, but still have gradient background.
This plugin uses a slightly modified version of jQuery roundedCorners plugin for creating rounded corners and gradient backgrounds in browsesr that don’t natively support them.
There are many similar plugins available, and I’m not sure if this is the best one out there, but I found it the easisest to work with right now.
Usage
SuperButtons is really easy to use. Just install the plugin like any other one, go to Your post or page editing screen and click the sweet 
button on the toolbar.
This will open a small dialog where You can enter the button text, choose it’s style and also create a title attribute and specify, what happens when the button is clicked – it can either link to a page or post or external website or You can provide a javascript function.
Set Your options to create a sweet web 2 style button
The plugin automagically creates the appropriate shortcode that generates the nice button for us. The shortcode can be manually entered and edited as well.
A button is born!
Shortcode options:
link
A link to a webpage, post, page, whatever. You can also provide a javascript function like this:javascript:alert('You clicked the button!');title
The title attribute of the button. This is the text that appears when You hover Your mouse over the button.class
The button class. Note: The class should always be prefixed withsprbtn_image
Complete url to an image. The image should be 16×16 pixels.
A complete example of a button:
[superbutton link="http://wpsupertheme.com" title="A nice button!" image="http://wpsupertheme.com/wp-content/themes/twentyten/images/wordpress.png"]Light Gray SuperButton[/superbutton]
Design Your own
SuperButtons come with a set of predefined styles that are located in superbuttons.css file. Take a look at them to see how they work. Note: You have to use the sprbtn_ prefix in order for the styles to work. If You want to create Your own styles, put them in the custom_styles.css file instead. This way, they won’t be overwritten by future updates.
Localization
This plugin supports localization with .mo files and tinyMCE language files as well. Currently, its only available in english though.
Download
…or check out the plugin at wordpress.org
Feedback, support, comments.
Please do provide Your feedback by leaving Your comments below. I can not offer free premium support, but I will try to do my best to help You, should You run into any problems.
Dou You like this plugin? Please consider a donation!
It takes a lot of my personal time to develop this plugin and I’m offering it for free. You can however support the development of this plugin by making a small (or big) donation. Every donation is very appreciated!
Nifty idea. Unfortunately the S-button did not appear to the toolbar (tinymce or html) of either of the two 2.9.2 WordPresses I tried this at. Shortcode seemed to work though.
Oh and couple of feature requests for future versions: support for target=”_blank” and rel=”nofollow”.
Hey Mikko!
Tnanks for the feedback. There seems to be a problem with the WordPress plugin repository or SVN – it won’t include the button code in the plugin .zio file. I’ll see if I can get this sorted out soon.
Also, the features You suggested will be included in a next release soon.
Alright, the S-button problem is now fixed. Please re-download if You cannot see the S-button in Your post or page editor.
The S button did not appear for me when using CKEditor with Wp 2.9.2. It does appear when the CKEditor plugin is deactivated.
Hello SFGolfer
This plugin supports only the WordPress native TinyMCE editor. You can still use the shortcodes though.
Not sure if I discovered something here but in WP 2.9.2 and WP 3.0 Beta 1, simply activating the plugin messes with the drag-n-dropping of a new widget into a sidebar position.
The drag-n-drop action works on the screen but it throws an error in Firefox and the newly dragged widget is not there when you refresh the screen.
Error in FF: d.item.html() is null
Hey, thanks for the report. This has been resolved in 0.5.1. Please re-download.
The fix worked.
Thanks!
Hi, I just downloaded your Super button plug-in and I also get the same problem that you say was fixed. It does not show in the post/page editor toolbar. I am using the wordpress 2.9.2 version as well.
Hi Tina! Are You sure You downloaded the latest version? Can You make sure that there is a folder called tinymce under wp-content/plugins/superbuttons/ ?
The previous bug was that for some reason this folder was missing. However, I just downloaded it myself and it seems to work.
Alright, I have found the problem. There must be something wrong with either WordPress plugin repository or Tortoise SVN as it keeps deleting the tinymce folder from the package. I hope to figure it out soon. Until then, You can still fall back to using the shortcode in your posts/pages.
Alright people, I figured out what I was doing wrong. Never used SVN and WordPress Plugin Repository before so I hope You can forgive me.
Anyway, to get the S-button to appear, please re-download the plugin!
I uploaded and activated, but my 2.9.2 wordpress does not display the “S” access in the posts/pages formatting bar.
Pls advise about when this will be updated. As is, it is too much trouble to bother with, unless I want to just take the as is format in the sample code here.
Hey Pat,
are You using the latest version (0.5.1)? I just tried a clean install of it and the button appears fine.
If You are using any other editor than TinyMCE or maybe a customized version of TinyMCE, it might not work too. See http://wpsupertheme.com/superbuttons-stylish-buttons-for-your-website/#comment-8
downloaded from wordpress.org says version 0.5.1
My WordPress is 2.9.2
Where do I find ref. to TinyMCE? Is this usually on the standard WordPress installation?
Yes, TinyMCE is the original WordPress editor toolbar.
Any way for this to work in the widget areas?
Hey Joey, haven’t really tested in the widget areas. Are You trying to use the shortcode in text widget?
Pingback: WORDPRESS: MY RESEARCH « Betarelease Design Team
Hello Illimar,
Tried your plugin this morning, WP 292, works well.
Too bad, no rounding edges in IE ( market appr. 75% ), nevertheless a nice “picture”.
Also important : target=_blank and rel=nofollow, tried to implement it as usual within a link, but noway, isn’t published. Any solution yet ?
Hey, IE does not support rounded corners. This is also said above in the description of this plugin.
Right now, target and rel are not supported but will be in the next release.
Any timing regarding to the next release ? ( Won’t have trouble with G. )
Hey,
right now i’m quite busy but maybe in a few weeks.
Is it possible to use this without wp? in a dedicated install of tinymce in a standalone app? many thanks
No. But if You’re into code, it probably can be adjusted to work without WP and only as a TinyMCE plugin.
Hello,
I just love the plugin…..
Is there a way to deactivate the canvas for IE….?
Might want to add a way to insert Superbuttons in html view…..
Cheers,
Johnny
Edit the lines 172 and 174 in superbuttons.js like this:
var max = 0;
} else {
var max = 0;
}
Hello,
Thank you illimar
Its very useful plugin but please let me know how can we add target _blank link for a button?
I’m not familiar with coding. What am I supposed to do to change the size/shape of a button? I’d like a big fat square
Pingback: » Plot Bin Pareto creative-excel4u
Just wanted to say THANKS!
This plugin seems to be working fine in WP 3.1.2
The S button appears and the buttons display as expected.
This is a very handy tool.
I’ve spent ages looking for a great button plugin and yours looks and works the best so far. But, I’m getting the following error when testing the site I’m building in IE8;
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; OfficeLivePatch.1.3; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.4)
Timestamp: Sat, 11 Jun 2011 15:55:57 UTC
Message: Object doesn’t support this property or method
Line: 2
Char: 2
Code: 0
URI: http://www.xxxxx.xxx/wp-content/plugins/superbuttons/superbuttons.js
Any idea why it’s causing the error in IE8? It works fine using Firefox, I haven’t tested with other browsers yet..
Thanks,
Andy
Hey Andy!
It seems the code for IE8 is a bit funky – try deleting everything in the superbuttons.js file and see if it works. The code in the file is supposed to add dropshadow support for IE8 but it may not work in all conditions.
Pingback: Cómo añadir más calidad y controles de usuario a tus contenidos promocionales
Pingback: Cómo añadir más calidad y controles de usuario a tus contenidos promocionales | ALGUADA
Pingback: ¿Cómo añadir más controles de usuario a tus contenidos promocionales?
Thanks for the great plugin, I am trying to use it for some buttons and the text becomes blue on hover (on the lightgray button). I would like to style it to remain black (or darg gray whatever) Can you please assist?
There’s probably a conflict with some other CSS rule. You can try to add !important rule to the superbutton hover CSS. Something like this:
.sprbtn_lightgray a:hover {color:#333 !important;}Hi there!
Thank you very much for this plugin! So far is the one I like the most, however I was also hoping for a big square, like Jobo up there.
Is there any way to tweak it that may not require coding (etc) knowledge please?
I was also -mainly- hoping to use my own images for background, although they looked pretty cool with the added colour!
And at last, but not least, I was also wondering if i could change the fonts and colours on the buttons.
I hope I’m not asking for too much!
Cheers! ^u^
Hey, I’m afraid that you would need basic CSS skills to modify the appearance.
For square corners, You would just need to remove the “border-radius” property. As for the fonts, You would need to tweak those in CSS as well.