Sexy Buttons¶ ↑

With sexy buttons plugin you get sexy styled buttons inside Rails apps

*FOR RAILS 2.X SUPPORT YOU SHOULD SWITCH TO “rails2” BRANCH*

Installation¶ ↑

rails plugin install git://github.com/vlado/sexy_buttons.git

rails generate sexy_buttons:install

This will generate initializer in config/initializers/sexy_buttons.rb and all resources (css and background images) will be copied to public/stylesheets/sexy_buttons

Usage¶ ↑

First include sexy buttons css files in your head section

sexy_buttons_stylesheet_link_tag

This will include default theme, and you’ll be able to create sexy BUTTON tag using

sexy_button "Click to submit"

or A tag

sexy_link_to "Click here", "/some/url"

sexy_link_to_remote "Click here",  :url => "/some/url", :theme => "my-theme"

Themes¶ ↑

If you want to change look of buttons you’ll have to add theme to “themes” dir, and then include them in head tag using

sexy_buttons_stylesheet_link_tag "theme_one", "theme_two"

Then you can call new theme like this

sexy_button "Click to submit", :theme => "my-theme"

or like this

sexy_link_to "Click here", "/some/url", :theme => "my-theme"

You can also include all themes using

sexy_buttons_stylesheet_link_tag :all

You can also specify default theme (config/initializers/sexy_buttons.rb).

SexyButtons.default_theme = "my_cool_theme"

Can I add my own theme?¶ ↑

Sure, actually there is generator for this. For example if you run

rails generate sexy_buttons theme some_theme_name 15px 30px

you will get new theme in /stylesheets/sexy_buttons/themes/some_theme_name directory with font-size set to 15px and button height of 30px.

You will need to create background image yourself and place it in /stylesheets/sexy_buttons/themes/some_theme_name/bg.png and optionally update styles /stylesheets/sexy_buttons/themes/some_theme_name/style.css

Just check themes provided and you shouldn’t have problems to do that.

Supported Browser¶ ↑

So far plugin is tested in:

Safari 4.0.5 (OS X)
Chrome 5.0.342.9 beta (OS X)
Firefox 3.6.3 (OS X)
Firefox 3.6 (Windows)
IE 8 (Windows)
IE 7 (Windows)
IE 6 (Windows)

Credits¶ ↑

www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/

www.cssplay.co.uk/menu/inline-links3.html

Licence¶ ↑

(The MIT Licence)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.