Buttons
Using Button shortcode you can add buttons anywhere in the site. In addition one of three custom styles and ID can be assigned to the button shortcode. After clicking on button with ID, the page scrolls smoothly to the target position. Buttons added as usual doesn’t have such functionality.
Parameters
Parameters: title, url, color, titlecolor;
Other Parameters: width, target, left, right, bottom, withid, alt, align;
Default: title=”Button Title”, url=”http://www.cuckoothemes.com”, target=none, color=”#4F4F4F”, titlecolor=”#ffffff”, width=none, target=none, left=none, right=none, bottom=none, withid=”false”, alt=none.
Optional Parameters:
Button margin:
left – margin to left in pixels;
right – margin to right in pixels;
top – margin to top in pixels;
bottom – margin to bottom in pixels.
[btn title="Button Title" url="http://www.cuckoothemes.com" buttonstyle="1"]Buttons with ID | Grab Shortcode
[btn title="CLICK TO SCROLL" alt="Click Here to Scroll" withid="true" url="#link-with-id" buttonstyle="3" right=20px bottom=20px][btn title="SCROLL HOME" alt="Click Here to Scroll" withid="true" url="#home2" buttonstyle="1" right=20px bottom=20px]Various Buttons | Grab Shortcode
[one-fourth title="Column One Fourth"]Maecenas facilisis sodales sem, vel iaculis dui malesuada vel. Curabitur magna ipsum, euismod at gravida vel, porta sed metus. Phasellus eget magna nisi, nec semper est. Duis in tortor nunc. Fusce et feugiat tortor.
[btn title="Button Title" url="#" buttonstyle="2" bottom=20px][/one-fourth][one-fourth title="Column One Fourth"]Maecenas facilisis sodales sem, vel iaculis dui malesuada vel. Curabitur magna ipsum, euismod at gravida vel, porta sed metus. Phasellus eget magna nisi, nec semper est. Duis in tortor nunc. Fusce et feugiat tortor.
[btn title="Button Title" url="#" buttonstyle="3" bottom=20px][/one-fourth][one-fourth title="Column One Fourth"]Maecenas facilisis sodales sem, vel iaculis dui malesuada vel. Curabitur magna ipsum, euismod at gravida vel, porta sed metus. Phasellus eget magna nisi, nec semper est. Duis in tortor nunc. Fusce et feugiat tortor.
[btn title="Button Title" url="#" buttonstyle="1" bottom=20px][/one-fourth][one-fourth title="Column One Fourth" last="true"]Maecenas facilisis sodales sem, vel iaculis dui malesuada vel. Curabitur magna ipsum, euismod at gravida vel, porta sed metus. Phasellus eget magna nisi, nec semper est. Duis in tortor nunc. Fusce et feugiat tortor.
[btn title="Button Title" url="#" buttonstyle="2" bottom=20px][/one-fourth]
[div-line]
[btn title="Button Title" url="#" buttonstyle="2" right=20px bottom=20px][btn title="Button Title" url="#" buttonstyle="3" right=20px bottom=20px][btn title="Button Title" url="#" buttonstyle="2" right=20px bottom=20px][btn title="Button Title" url="#" buttonstyle="1" bottom=20px]
[div-line]
[btn title="Full Width Button" url="#" width="100%" alt="Click on me" titlecolor="#ffffff" buttonstyle="1"]
[div-line]
[one-fourth][btn title="BUTTON TITLE WITH LONG TITLE COMES HERE" url="#" width="100%" alt="Click on me" buttonstyle="1"][/one-fourth][one-fourth][btn title="BUTTON TITLE WITH LONG TITLE COMES HERE. DOUBLE SIZE BUTTON LARGER THAN PREVIOUS ONE" url="#" width="100%" alt="Click on me" buttonstyle="3"][/one-fourth][one-fourth][btn title="CLICK" url="#" width="100px" alt="Click on me" buttonstyle="1"][/one-fourth][one-fourth last="true"][btn title="Width 100%" url="#" width="100%" alt="Click on me" buttonstyle="2"][/one-fourth]Column One Fourth
Maecenas facilisis sodales sem, vel iaculis dui malesuada vel. Curabitur magna ipsum, euismod at gravida vel, porta sed metus. Phasellus eget magna nisi, nec semper est. Duis in tortor nunc. Fusce et feugiat tortor.Column One Fourth
Maecenas facilisis sodales sem, vel iaculis dui malesuada vel. Curabitur magna ipsum, euismod at gravida vel, porta sed metus. Phasellus eget magna nisi, nec semper est. Duis in tortor nunc. Fusce et feugiat tortor.Column One Fourth
Maecenas facilisis sodales sem, vel iaculis dui malesuada vel. Curabitur magna ipsum, euismod at gravida vel, porta sed metus. Phasellus eget magna nisi, nec semper est. Duis in tortor nunc. Fusce et feugiat tortor.Column One Fourth
Maecenas facilisis sodales sem, vel iaculis dui malesuada vel. Curabitur magna ipsum, euismod at gravida vel, porta sed metus. Phasellus eget magna nisi, nec semper est. Duis in tortor nunc. Fusce et feugiat tortor.Link with ID
Link With ID shortcode allows adding unusual links to your content. After clicking on such link, the page scrolls smoothly to the target position. Links added as usual doesn’t have such functionality.
Parameters
Parameters: url;
Other Parameters: color, align;
Default: url=”#enter-id-here” color=none, align=none.
[urlwithid url="#enter-id-here"]Your Text[/urlwithid]Link with ID | Grab Shortcode
[urlwithid url="#home2"]<strong>CLICK HERE</strong>[/urlwithid] to Scroll to the top of this page.CLICK HERE to Scroll to the top of this page.
Button with Alignment | Grab Shortcode
[one-third title="Align Left"][btn title="Button Title" url="http://www.cuckoothemes.com" buttonstyle="1" width="225px" align="left"][/one-third][one-third title="Align Center"][btn title="Button Title" url="http://www.cuckoothemes.com" buttonstyle="1" width="225px" align="center"][/one-third][one-third last="true" title="Align Right"][btn title="Button Title" url="http://www.cuckoothemes.com" buttonstyle="1" width="225px" align="right"][/one-third]Button align functions can be activated only when button width parameter is set.