%[if %("%id=fontawesome_call%" == "yesfontawesome")% ]%
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
%[endif]%

<div class="ButtonMakerStack%id% ButtonMakerStack">
	%[if %("%id=button_type%" == "href")% ]%<a href="%id=link_url -href%" %[if %("%id=link_newtab%" == "true")% ]%target="_blank"%[endif]% class="Button-Link %id=custom_classes%" %id=custom_attributes%></a>%[endif]%
	%[if %("%id=button_type%" == "onclick")% ]%<a onclick="%id=button_function%" class="Button-Link %id=custom_classes%" %id=custom_attributes%></a>%[endif]%
	%[if %("%id=button_icon%" == "displayicon")% ]%<div class="Button-Icon">%id=icon_syntax%</div>%[endif]%
	<div class="Button-Label">%id=button_label%</div>
	%[if %("%id=button_gloss%" == "shine")% ]%<div class="Button-Gloss"></div>%[endif]%
</div><!--/ButtonMakerStack-->


%[if %("%id=source_view%" == "viewsource")% ]%
%[if !edit]%
<div id="Source-Code%id%">
<p>Because you've enabled the <strong>View Source Code</strong> option in the stack settings, the source code for the button is displayed below. The source code for each button comprises of CSS and HTML markup. This code can be pasted into non-Stack page types; like the sidebar of a blog page, a contact form page or the content regions of a WeaverPix page. Carefully follow the instructions below to copy and paste the code into the correct locations of your project. This CSS and HTML code presented to you below is automatically generated for you, and customised based on any settings you've changed in the ButtonMaker stack.</p>

<p>We start with the CSS (cascade style sheet). CSS is used to style all aspects of the button and apply things like rollover animations. CSS code should be copied from below and pasted into the <strong>Custom CSS</strong> box in RapidWeaver, in the page inspector or the site setup window. Alternatively, the CSS code can go in your theme custom.css file or any other active stylesheet being called by your page.</p>

<form>
<textarea style="width: 100%; height: 200px;" onclick="this.focus();this.select()" readonly="readonly" class="viewsource-area">
/* CSS code for the %id=button_label% button */

#%id% *,
#%id% *:before,
#%id% *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.ButtonMakerStack%id% {
	line-height: %id=button_height%px;
	width: 100%;
	text-align: center;
	position: relative;
	z-index: 10;
	transition: all %id=button_animation%ms ease-in-out;
	border-radius: %id=border_radius%px;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

%[if %("%id=button_border%" == "border")% ]%
.ButtonMakerStack%id% {
	border: %id=border_thickness%px %id=border_style% %id=border_staticcolor%;
}

.ButtonMakerStack%id%:hover {
	border: %id=border_thickness%px %id=border_style% %id=border_hoveredcolor%;
}
%[endif]%

%[if %("%id=button_bg%" == "0")% ]%
/* No background */
.ButtonMakerStack%id% {
	background: transparent;
}
%[endif]%

%[if %("%id=button_bg%" == "1")% ]%
/* Solid colour fill */
.ButtonMakerStack%id% {
	background: %id=container_color_fill_s%;
}

.ButtonMakerStack%id%:hover {
	background: %id=container_color_fill_h%;
}
%[endif]%

%[if %("%id=button_bg%" == "2")% ]%
/* Vertical gradient fill */
.ButtonMakerStack%id% {
	background-color: %id=container_bottom_fill_s%;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(%id=container_top_fill_s%), to(%id=container_bottom_fill_s%));
	background-image: -moz-linear-gradient(top, %id=container_top_fill_s%, %id=container_bottom_fill_s%);
	background-image: -ms-linear-gradient(top, %id=container_top_fill_s%, %id=container_bottom_fill_s%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, %id=container_top_fill_s%), color-stop(100%, %id=container_bottom_fill_s%));
	background-image: -webkit-linear-gradient(top, %id=container_top_fill_s%, %id=container_bottom_fill_s%);
	background-image: -o-linear-gradient(top, %id=container_top_fill_s%, %id=container_bottom_fill_s%);
	background-image: linear-gradient(top, %id=container_top_fill_s%, %id=container_bottom_fill_s%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='%id=container_top_fill_s%', endColorstr='%id=container_bottom_fill_s%', GradientType=0);
}

.ButtonMakerStack%id%:hover {
	background-color: %id=container_bottom_fill_h%;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(%id=container_top_fill_h%), to(%id=container_bottom_fill_h%));
	background-image: -moz-linear-gradient(top, %id=container_top_fill_h%, %id=container_bottom_fill_h%);
	background-image: -ms-linear-gradient(top, %id=container_top_fill_h%, %id=container_bottom_fill_h%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, %id=container_top_fill_h%), color-stop(100%, %id=container_bottom_fill_h%));
	background-image: -webkit-linear-gradient(top, %id=container_top_fill_h%, %id=container_bottom_fill_h%);
	background-image: -o-linear-gradient(top, %id=container_top_fill_h%, %id=container_bottom_fill_h%);
	background-image: linear-gradient(top, %id=container_top_fill_h%, %id=container_bottom_fill_h%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='%id=container_top_fill_h%', endColorstr='%id=container_bottom_fill_h%', GradientType=0);
}
%[endif]%

%[if %("%id=button_bg%" == "3")% ]%
/* Horizontal gradient fill */
.ButtonMakerStack%id% {
	background-color: %id=container_left_fill_s%;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, right bottom, from(%id=container_left_fill_s%), to(%id=container_right_fill_s%));
	background-image: -moz-linear-gradient(left, %id=container_left_fill_s%, %id=container_right_fill_s%);
	background-image: -ms-linear-gradient(left, %id=container_left_fill_s%, %id=container_right_fill_s%);
	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, %id=container_left_fill_s%), color-stop(100%, %id=container_right_fill_s%));
	background-image: -webkit-linear-gradient(left, %id=container_left_fill_s%, %id=container_right_fill_s%);
	background-image: -o-linear-gradient(left, %id=container_left_fill_s%, %id=container_right_fill_s%);
	background-image: linear-gradient(left, %id=container_left_fill_s%, %id=container_right_fill_s%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='%id=container_left_fill_s%', endColorstr='%id=container_right_fill_s%', GradientType=1);
}

.ButtonMakerStack%id%:hover {
	background-color: %id=container_left_fill_h%;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, right bottom, from(%id=container_left_fill_h%), to(%id=container_right_fill_h%));
	background-image: -moz-linear-gradient(left, %id=container_left_fill_h%, %id=container_right_fill_h%);
	background-image: -ms-linear-gradient(left, %id=container_left_fill_h%, %id=container_right_fill_h%);
	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, %id=container_left_fill_h%), color-stop(100%, %id=container_right_fill_h%));
	background-image: -webkit-linear-gradient(left, %id=container_left_fill_h%, %id=container_right_fill_h%);
	background-image: -o-linear-gradient(left, %id=container_left_fill_h%, %id=container_right_fill_h%);
	background-image: linear-gradient(left, %id=container_left_fill_h%, %id=container_right_fill_h%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='%id=container_left_fill_h%', endColorstr='%id=container_right_fill_h%', GradientType=1);
}
%[endif]%

%[if %("%id=button_bg%" == "4")% ]%
/* Top left to bottom right diagonal gradient fill */
.ButtonMakerStack%id% {
background: %id=container_tl_fill_s%;
background: -moz-linear-gradient(-45deg,  %id=container_tl_fill_s% 0%, %id=container_br_fill_s% 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,%id=container_tl_fill_s%), color-stop(100%,%id=container_br_fill_s%));
background: -webkit-linear-gradient(-45deg,  %id=container_tl_fill_s% 0%,%id=container_br_fill_s% 100%);
background: -o-linear-gradient(-45deg,  %id=container_tl_fill_s% 0%,%id=container_br_fill_s% 100%);
background: -ms-linear-gradient(-45deg,  %id=container_tl_fill_s% 0%,%id=container_br_fill_s% 100%);
background: linear-gradient(135deg,  %id=container_tl_fill_s% 0%,%id=container_br_fill_s% 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='%id=container_tl_fill_s%', endColorstr='%id=container_br_fill_s%',GradientType=1 );
}

.ButtonMakerStack%id%:hover {
background: %id=container_tl_fill_h%;
background: -moz-linear-gradient(-45deg,  %id=container_tl_fill_h% 0%, %id=container_br_fill_h% 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,%id=container_tl_fill_h%), color-stop(100%,%id=container_br_fill_h%));
background: -webkit-linear-gradient(-45deg,  %id=container_tl_fill_h% 0%,%id=container_br_fill_h% 100%);
background: -o-linear-gradient(-45deg,  %id=container_tl_fill_h% 0%,%id=container_br_fill_h% 100%);
background: -ms-linear-gradient(-45deg,  %id=container_tl_fill_h% 0%,%id=container_br_fill_h% 100%);
background: linear-gradient(135deg,  %id=container_tl_fill_h% 0%,%id=container_br_fill_h% 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='%id=container_tl_fill_h%', endColorstr='%id=container_br_fill_h%',GradientType=1 );
}
%[endif]%

%[if %("%id=button_bg%" == "5")% ]%
/* Bottom left to top right diagonal gradient fill */
.ButtonMakerStack%id% {
background: %id=container_bl_fill_s%;
background: -moz-linear-gradient(45deg, %id=container_bl_fill_s% 0%, %id=container_tr_fill_s% 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,%id=container_bl_fill_s%), color-stop(100%,%id=container_tr_fill_s%));
background: -webkit-linear-gradient(45deg, %id=container_bl_fill_s% 0%,%id=container_tr_fill_s% 100%);
background: -o-linear-gradient(45deg, %id=container_bl_fill_s% 0%,%id=container_tr_fill_s% 100%);
background: -ms-linear-gradient(45deg, %id=container_bl_fill_s% 0%,%id=container_tr_fill_s% 100%);
background: linear-gradient(45deg, %id=container_bl_fill_s% 0%,%id=container_tr_fill_s% 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='%id=container_bl_fill_s%', endColorstr='%id=container_tr_fill_s%',GradientType=1 );
}

.ButtonMakerStack%id%:hover {
background: %id=container_bl_fill_h%;
background: -moz-linear-gradient(45deg, %id=container_bl_fill_h% 0%, %id=container_tr_fill_h% 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,%id=container_bl_fill_h%), color-stop(100%,%id=container_tr_fill_h%));
background: -webkit-linear-gradient(45deg, %id=container_bl_fill_h% 0%,%id=container_tr_fill_h% 100%);
background: -o-linear-gradient(45deg, %id=container_bl_fill_h% 0%,%id=container_tr_fill_h% 100%);
background: -ms-linear-gradient(45deg, %id=container_bl_fill_h% 0%,%id=container_tr_fill_h% 100%);
background: linear-gradient(45deg, %id=container_bl_fill_h% 0%,%id=container_tr_fill_h% 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='%id=container_bl_fill_h%', endColorstr='%id=container_tr_fill_h%',GradientType=1 );
}
%[endif]%

%[if %("%id=button_bg%" == "6")% ]%
/* Radial gradient fill */
.ButtonMakerStack%id% {
background: %id=container_centre_fill_s%;
background: -moz-radial-gradient(center, ellipse cover,  %id=container_centre_fill_s% 0%, %id=container_outside_fill_s% 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,%id=container_centre_fill_s%), color-stop(100%,%id=container_outside_fill_s%));
background: -webkit-radial-gradient(center, ellipse cover, %id=container_centre_fill_s% 0%,%id=container_outside_fill_s% 100%);
background: -o-radial-gradient(center, ellipse cover, %id=container_centre_fill_s% 0%,%id=container_outside_fill_s% 100%);
background: -ms-radial-gradient(center, ellipse cover, %id=container_centre_fill_s% 0%,%id=container_outside_fill_s% 100%);
background: radial-gradient(ellipse at center, %id=container_centre_fill_s% 0%,%id=container_outside_fill_s% 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='%id=container_centre_fill_s%', endColorstr='%id=container_outside_fill_s%',GradientType=1 );
}

.ButtonMakerStack%id%:hover {
background: %id=container_centre_fill_h%;
background: -moz-radial-gradient(center, ellipse cover,  %id=container_centre_fill_h% 0%, %id=container_outside_fill_h% 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,%id=container_centre_fill_h%), color-stop(100%,%id=container_outside_fill_h%));
background: -webkit-radial-gradient(center, ellipse cover, %id=container_centre_fill_h% 0%,%id=container_outside_fill_h% 100%);
background: -o-radial-gradient(center, ellipse cover, %id=container_centre_fill_h% 0%,%id=container_outside_fill_h% 100%);
background: -ms-radial-gradient(center, ellipse cover, %id=container_centre_fill_h% 0%,%id=container_outside_fill_h% 100%);
background: radial-gradient(ellipse at center, %id=container_centre_fill_h% 0%,%id=container_outside_fill_h% 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='%id=container_centre_fill_h%', endColorstr='%id=container_outside_fill_h%',GradientType=1 );
}
%[endif]%

%[if %("%id=button_bg%" == "7")% ]%
/* Local image image applied as a CSS background */
.ButtonMakerStack%id% {
	background: url(%id=local_image_static%);
	background-size: %id=localimage_sizing%;
	opacity: 0.%id=localimage_staticopacity%;
}

.ButtonMakerStack%id%:hover {
	opacity: 0.%id=localimage_hoveropacity%;
}
%[endif]%

%[if %("%id=button_bg%" == "8")% ]%
/* Warehoused image applied as a CSS background */
.ButtonMakerStack%id% {
	background: url(%id=warehoused_image_static -href%);
	background-size: %id=warehouseimage_sizing%;
	opacity: 0.%id=warehouseimage_staticopacity%;
}

.ButtonMakerStack%id%:hover {
	opacity: 0.%id=warehouseimage_hoveropacity%;
}
%[endif]%

%[if %("%id=button_bg%" == "9")% ]%
/* RGBa fill applied as a CSS background */
.ButtonMakerStack%id% {
	background: rgba(%id=rgbafill_static%);
}

.ButtonMakerStack%id%:hover {
	background: rgba(%id=rgbafill_hover%);
}
%[endif]%


%[if %("%id=button_gloss%" == "shine")% ]%
.ButtonMakerStack%id% .Button-Gloss {
	position: absolute;
	%id=gloss_position%: 0;
	left: 0;
	height: %id=gloss_height%%;
	width: 100%;
	background: %id=gloss_color%;
	opacity: 0.%id=gloss_static%;
	transition: all %id=button_animation%ms ease-in-out;
}

/* Adjust the bevel opavity on button hover */
.ButtonMakerStack%id%:hover .Button-Gloss {
	opacity: 0.%id=gloss_hover%;
}
%[endif]%

.ButtonMakerStack%id% a.Button-Link {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 25;
	outline: none;
}

/* Button inset effect on click */
.ButtonMakerStack%id% a.Button-Link:active {
	%[if %("%id=button_presseffect%" == "displaypresseffect")% ]%
	-webkit-box-shadow:inset 0 0 %id=press_blur%px %id=press_spread%px %id=shadow_colour%;
	box-shadow:inset 0 0 %id=press_blur%px %id=press_spread%px %id=shadow_colour%;
	%[endif]%
	outline: none;
}

.ButtonMakerStack%id% .Button-Label {
	color: %id=label_statictext%;
	font-size: %id=label_fontsize%px;
	display: block;
	z-index: 15;
	position: relative;
	transition: all %id=button_animation%ms ease-in-out;
	font-family: %id=label_fontface%;
	text-align: %id=label_alignment%;
	padding-left: %id=label_indent%px;
	padding-right: %id=label_indent%px;
}

.ButtonMakerStack%id%:hover .Button-Label {
	color: %id=label_hovertext%;
}

%[if %("%id=text_shadow%" == "textshadow")% ]%
.ButtonMakerStack%id% .Button-Label {
	text-shadow: %id=label_shadowsize%px %id=label_shadowsize%px %id=label_shadowsize%px %id=label_shadowstatic%;
}

.ButtonMakerStack%id%:hover .Button-Label {
	text-shadow: %id=label_shadowsize%px %id=label_shadowsize%px %id=label_shadowsize%px %id=label_shadowhover%;
}
%[endif]%

%[if %("%id=button_icon%" == "displayicon")% ]%
/* If button icon is enabled */
.ButtonMakerStack%id% .Button-Icon {
	float: left;
	width: %id=icon_width%px;
	z-index: 15;
	overflow: hidden;
	height: %id=button_height%px;
	position: relative;
}

.ButtonMakerStack%id% .Button-Icon,
.ButtonMakerStack%id% .Button-Icon [class^="fa fa-"] {
	color: %id=icon_staticicon%;
	font-size: %id=icon_fontsize%px;
	line-height: %id=button_height%px;
	text-shadow: %id=icon_shadowsize%px %id=icon_shadowsize%px %id=icon_shadowsize%px %id=icon_shadowstatic%;
	transition: all %id=button_animation%ms ease-in-out;
}

.ButtonMakerStack%id%:hover .Button-Icon,
.ButtonMakerStack%id%:hover .Button-Icon [class^="fa fa-"] {
	color: %id=icon_hovericon%;
	text-shadow: %id=icon_shadowsize%px %id=icon_shadowsize%px %id=icon_shadowsize%px %id=icon_shadowhover%;
}

.ButtonMakerStack%id% .Button-Label {
	margin-left: %id=icon_width%px;
	border-left: %id=icon_dividerwidth%px solid %id=icon_divider%;
}
%[endif]%


@media print {
	.ButtonMakerStack%id% {
		display: none !important;
	}
}

/* End of CSS code for the %id=button_label% button */
</textarea>
</form>


<p>HTML code defines the physical structure and content of the button. The HTML markup below should be copied and pasted into any styled text, Markdown, HTML code, sidebar or ExtraContent region, in your page. If entering into a styled text or Markdown area, highlight the code and select the <strong>Ignore Formatting</strong> option, in the RapidWeaver <strong>Format</strong> menu (to clear-away surplus line breaks).</p>

<form>
<textarea style="width: 100%; height: 200px;" onclick="this.focus();this.select()" readonly="readonly" class="viewsource-area">%[if %("%id=fontawesome_call%" == "yesfontawesome")% ]%
&lt;!-- For improved performance, you may wish to move this Font Awesome call into the Custom Header box -->
&lt;link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">%[endif]%

&lt;!-- HTML Markup for the %id=button_label% button -->
&lt;div class="ButtonMakerStack%id% ButtonMakerStack">
	%[if %("%id=button_type%" == "href")% ]%&lt;a href="%id=link_url -href%" %[if %("%id=link_newtab%" == "true")% ]%target="_blank"%[endif]% class="Button-Link %id=custom_classes%" %id=custom_attributes%>&lt;/a>%[endif]%%[if %("%id=button_type%" == "onclick")% ]%&lt;a onclick="%id=button_function%" class="Button-Link %id=custom_classes%" %id=custom_attributes%>&lt;/a>%[endif]%
	%[if %("%id=button_icon%" == "displayicon")% ]%&lt;div class="Button-Icon">%id=icon_syntax%%[if edit]%&dotsquare;%[endif]%&lt;/div>%[endif]%
	&lt;div class="Button-Label">%id=button_label%&lt;/div>
	%[if %("%id=button_gloss%" == "shine")% ]%&lt;div class="Button-Gloss">&lt;/div>%[endif]%
&lt;/div>&lt;!--/ButtonMakerStack--></textarea>
</form>

<p>Feel free to further-edit your generated source code; to tidy it up, remove white spacing or minimise it.</p>
</div><!--Source-Code%id%-->
%[endif]%
%[endif]%