<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [rule type="empty"]</p>
<h2>Button's Color Combinations</h2>
<p>[button width="21.7%" marginright="4.4%" align="left" bgcolor=""] [button width="21.7%" marginright="4.4%" align="left" bgcolor="#3AB60E"] [button width="21.7%" marginright="4.4%" align="left" bgcolor="#F12A59"] [button width="21.7%" marginright="0%" align="left" bgcolor="#00A6D6"] [rule type="clear"] [button width="21.7%" marginright="4.4%" align="left" description="Lorem Ipsum Dolor Amet Consectetur" bgcolor="#E5EAED" titlecolor="#00A5A7" textcolor="#888888"] [button width="21.7%" marginright="4.4%" align="left" description="Lorem Ipsum Dolor Amet Consectetur" bgcolor="#D9E7DD" titlecolor="#558100" textcolor="#7D9092"] [button width="21.7%" marginright="4.4%" align="left" description="Lorem Ipsum Dolor Amet Consectetur" bgcolor="#D7CFBC" titlecolor="#875440" textcolor="#ffffff"] [button width="21.7%" marginright="0%" align="left" description="Lorem Ipsum Dolor Amet Consectetur" bgcolor="#DFE2BC" titlecolor="#9B2B92" textcolor="#8B8567"] [rule type="clear"] [button width="21.7%" marginright="4.4%" align="left" description="Lorem Ipsum" bgcolor="#FFDD8E" titlecolor="#FF5400" textcolor="#AB7B4C"] [button width="21.7%" marginright="4.4%" align="left" description="Lorem Ipsum" bgcolor="#8CC000" titlecolor="#FFFC00" textcolor="#ffffff"] [button width="21.7%" marginright="4.4%" align="left" description="Lorem Ipsum" bgcolor="#91D4D7" titlecolor="#435F60" textcolor="#128B90"] [button width="21.7%" marginright="0%" align="left" description="Lorem Ipsum" bgcolor="#EB9DD3" titlecolor="#ffffff" textcolor="#A6376E"] [rule type="clear"] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [rule type="basic"]</p>
<h2>Button's Layouts with Icons</h2>
<p>[button width="25%" marginright="0%" description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor" iconurl="http://design.ait-themes.com/theme/cityguide/wp-content/uploads/sites/16/bag-white.png" iconalign="top" textalign="center" align="left"] [button width="25%" marginleft="0%" description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor" iconurl="http://design.ait-themes.com/theme/cityguide/wp-content/uploads/sites/16/support-white.png" iconalign="bottom" textalign="center" align="right"] [button width="41.2%" title="AIT Themes Button" description="Lorem Ipsum Dolor Sit Amet Consectetur" iconurl="http://design.ait-themes.com/theme/cityguide/wp-content/uploads/sites/16/check-white.png" iconalign="left" textalign="left" align="center"] [button width="41.2%" title="AIT Themes Button" description="Lorem Ipsum Dolor Sit Amet Consectetur" iconurl="http://design.ait-themes.com/theme/cityguide/wp-content/uploads/sites/16/star-white.png" iconalign="right" textalign="left" align="center"] [rule type="clear"] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [rule type="basic"]</p>
<h2>Button's Alignment</h2>
<p>[button width="80px" title="" iconurl="http://design.ait-themes.com/theme/cityguide/wp-content/uploads/sites/16/lists-white.png" align="left" bgcolor="#00A6D6"] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia. [rule type="clear"] [button width="80px" title="" iconurl="http://design.ait-themes.com/theme/cityguide/wp-content/uploads/sites/16/lists-white.png" align="right" bgcolor="#F12A59"] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia. [rule type="clear"] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>[button width="41.2%" title="AIT Themes Button" description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod..." iconurl="http://design.ait-themes.com/theme/cityguide/wp-content/uploads/sites/16/lists-white.png" iconalign="left" textalign="left" align="center" bgcolor="#8CC000" textcolor="#FFFC00"] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [rule type="top"]</p>
<h2>List of the Button's Settings</h2>
<div>
<table>
<thead>
<tr>
<th>Settings</th>
<th>Default Value</th>
<th>Unit / Available Options</th>
<th>Settings Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>title</th>
<td>AIT Themes</td>
<td>text</td>
<td>main title of the button</td>
</tr>
<tr>
<th>titlecolor</th>
<td>-</td>
<td>colorpicker</td>
<td>color of main title</td>
</tr>
<tr>
<th>description</th>
<td>-</td>
<td>text</td>
<td>description text of the button</td>
</tr>
<tr>
<th>textcolor</th>
<td>-</td>
<td>colorpicker</td>
<td>color of description text</td>
</tr>
<tr>
<th>textalign</th>
<td>center</td>
<td>center, left, right</td>
<td>text alignment in the button</td>
</tr>
<tr>
<th>width</th>
<td>180px</td>
<td>px, %</td>
<td>button's width</td>
</tr>
<tr>
<th>url</th>
<td>http://www.ait-themes.com</td>
<td>link</td>
<td>button's link</td>
</tr>
<tr>
<th>bgcolor</th>
<td>-</td>
<td>colorpicker</td>
<td>button's color</td>
</tr>
<tr>
<th>align</th>
<td>none</td>
<td>none, left, right, center</td>
<td>button's alignment</td>
</tr>
<tr>
<th>iconurl</th>
<td>-</td>
<td>url</td>
<td>link to image of the icon</td>
</tr>
<tr>
<th>iconalign</th>
<td>left</td>
<td>left, right, top, bottom</td>
<td>position of the icon in the button</td>
</tr>
<tr>
<th>margintop</th>
<td>-</td>
<td>px, %</td>
<td>margin above the button</td>
</tr>
<tr>
<th>marginleft</th>
<td>-</td>
<td>px, %</td>
<td>left margin of the button</td>
</tr>
<tr>
<th>marginright</th>
<td>-</td>
<td>px, %</td>
<td>right margin of the button</td>
</tr>
<tr>
<th>marginbottom</th>
<td>-</td>
<td>px, %</td>
<td>margin under the button</td>
</tr>
</tbody>
</table>
</div>