Tile Button CSS Plugin For Metro UI Themes

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.

 

License:

This product is free for both personal and commercial uses. If you like to share or distribute this product please include the link of this article at the place or web page where you are sharing or distributing this one, please DO NOT share our direct download links. If you want to share our articles on your site, you are free to copy excerpts but please DO NOT copy entire articles.

Please note, resources (like: images, videos, audios ...) are used for demonstration purpose only. Some resources may have third party licenses so please respect them in that case.

 

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.

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: