CSS Plugins Freebies Plugins 

Tile Button CSS Plugin For Metro UI Themes

SONHLAB , , , , , ,

Tile Button is a CSS Plugin that is used to create buttons for Metro UI themes. This plugin is very easy to use with two sizes, many colors to customize, simple and clean code, less images and very easy to use.

[ga_res]

[tile_bt btstyle=”tile-bt-2 solid-orange-2 hovershadow-orange left-2 margin-10″ icon=”demo-white-circle-48″ title=”Demo”]http://demo.siterepo.com/free/sonhlab-tile-buttons/demo.html[/tile_bt][tile_bt icon=”download-white-circle-48″ title=”Download”]http://goo.gl/udxFr[/tile_bt][clearspace][/clearspace]

 

[free_license]

 

Browser Support:

  • Internet Explorer 8+.
  • FireFox.
  • Google Chrome.
  • Safari 4+.
  • Opera 10+.

 

Tile Button Freatures:

  • Two Sizes.
  • Many Colors.
  • Fit both Light and Dark Templates.
  • Clean Code, Less Images.
  • Easy to Use.

 

Change Logs:

Dec 01 2012: First Version.

 

Credits:

  • This plugin is created and developed by SONHLAB.com

 

Table of Contents:

  1. Setup Tile Button Plugin.
  2. Create Tile Buttons.
  3. Works with WordPress.

[ga_res]

Section 1: Setup Tile Button Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html> at top of the page.

Include the following code into HEAD section of the page.

Include CSS files:

<link rel="stylesheet" href="css/sonhlab-tile-buttons.css" type="text/css" />

Setup done.

 

Section 2: Create Tile Buttons.

Tile Button Structure:

<div class="button-style-class color-class shadow-class">
  <a href="#" class="gradient-class">
    <img src="images/icon.png" alt="" />
    <span class="text-color-class">Button Title</span>
  </a>
</div>

To customize buttons you only need to replace classes in the structure by what you want and change the icon and button title.

Example:

Large Button:

<div class="tile-bt-2 solid-red shadow-red">
  <a href="#" class="gradient-class">
    <img src="images/icon.png" alt="" />
    <span class="light-text">Button Title</span>
  </a>
</div>

 

Small Button:

<div class="tile-bt solid-green-2 shadow-green">
  <a href="#" class="gradient-class">
    <img src="images/icon.png" alt="" />
    <span class="light-text">Button Title</span>
  </a>
</div>

 

End Section 2.

 

Section 3: Works with WordPress Shortcode.

This section will guide you how to create Tile Button Shortcode to use in your WordPress site.

Step 1: Copy Tile Button and MISC parts in the CSS file then paste them into your CSS file ( The file which your theme is using ).

Step 2: Create shortcode for Tile Button.

To create shortcode easily I recommend you should use Shortcode Exec PHP free plugin.

After you installed Shortcode Exec PHP you can create shortcode.

Go to Tools -> Shortcode Exec PHP -> Add code below:

Shortcode title :

sonhlab_tile_bt

Shortcode content:

extract(shortcode_atts(array('btstyle' => 'tile-bt-2 solid-blue shadow-blue','icon'=>'', 'title'=>'' ), $atts));
echo '<div class="'.$btstyle.'">
<a href="'.$content.'" target="_blank" class="gradient">
<img src="{link-to-image-folder}'.$icon.'.png" alt="'.$title.'" />
<span class="light-text">'.$title.'</span>
</a></div>';

*Note: Replace {link-to-image-folder} by an url to your image folder.

 

Usage:

[sonhlab_tile_bt btstyle="tile-bt solid-green shadow-green" icon="demo-icon" title="Demo Button"]http://sonhlab.com[/sonhlab_tile_bt]

 

 

That’s it. I hope you enjoyed this plugin and find it useful!

 

 

More Plugins with Metro UI: