%id=link% %id=label%
%%[[if preview]]%%
%[if %("%id=export_code%" == "true")% ]%
CSS code...
#%id=export_id% {
%[if %id=button_alignment_array[0]%]%text-align: left;%[endif]%%[if %id=button_alignment_array[1]%]%text-align: center;%[endif]%%[if %id=button_alignment_array[2]%]%text-align: right;%[endif]%
padding: %id=box_margin_array[1]% %id=box_margin_array[0]%;
}
#%id=export_id% a {
display: %id=block_button%;
background: %id=normal_fill_array[0]%;
background-image: -webkit-linear-gradient(top, %id=normal_fill_array[0]%, %id=normal_fill_array[1]%);
background-image: -moz-linear-gradient(top, %id=normal_fill_array[0]%, %id=normal_fill_array[1]%);
background-image: -ms-linear-gradient(top, %id=normal_fill_array[0]%, %id=normal_fill_array[1]%);
background-image: -o-linear-gradient(top, %id=normal_fill_array[0]%, %id=normal_fill_array[1]%);
background-image: linear-gradient(to bottom, %id=normal_fill_array[0]%, %id=normal_fill_array[1]%);
border-radius: %id=border_radius%;
font-family: %id=font%;
line-height: %id=line_height%;
letter-spacing: %id=letter_spacing%;
color: %id=normal_color%;
font-size: %id=font_size%;
padding: %id=box_padding_array[1]% %id=box_padding_array[0]%;
text-decoration: none;
outline: 0;
/* Misc. text formatting */ %[if %id=style_array[0]% ]%font-weight: bold;%[endif]%%[if %id=style_array[1]% ]%font-style: italic;%[endif]%%[if %id=style_array[2]% ]%text-transform: uppercase;%[endif]%%[if %id=style_array[3]% ]%text-decoration: underline;%[endif]%
%[if %("%id=text_shadow%" == "false")% ]%/* No text shadow */%[endif]%%[if %("%id=text_shadow%" == "true")% ]%text-shadow: %id=text_shadow_x%px %id=text_shadow_y%px %id=text_shadow_blur%px %id=text_shadow_color%;%[endif]%
%[if %("%id=box_shadow%" == "false")% ]%/* No box shadow */%[endif]%%[if %("%id=box_shadow%" == "true")% ]%box-shadow: %id=box_shadow_x%px %id=box_shadow_y%px %id=box_shadow_blur%px %id=box_shadow_color%;%[endif]%
%[if %("%id=border%" == "false")% ]%/* No border */%[endif]%%[if %("%id=border%" == "true")% ]%border: %id=border_style% %id=border_width% %id=border_normal%;%[endif]%
}
#%id=export_id% a:hover {
color: %id=hover_color%;
background: %id=hover_fill_array[0]%;
background-image: -webkit-linear-gradient(top, %id=hover_fill_array[0]%, %id=hover_fill_array[1]%);
background-image: -moz-linear-gradient(top, %id=hover_fill_array[0]%, %id=hover_fill_array[1]%);
background-image: -ms-linear-gradient(top, %id=hover_fill_array[0]%, %id=hover_fill_array[1]%);
background-image: -o-linear-gradient(top, %id=hover_fill_array[0]%, %id=hover_fill_array[1]%);
background-image: linear-gradient(to bottom, %id=hover_fill_array[0]%, %id=hover_fill_array[1]%);
text-decoration: none;
/* Misc. text formatting */ %[if %id=style_array[0]% ]%font-weight: bold;%[endif]%%[if %id=style_array[1]% ]%font-style: italic;%[endif]%%[if %id=style_array[2]% ]%text-transform: uppercase;%[endif]%%[if %id=style_array[3]% ]%text-decoration: underline;%[endif]%
%[if %("%id=border%" == "false")% ]%/* No border */%[endif]%%[if %("%id=border%" == "true")% ]%border: %id=border_style% %id=border_width% %id=border_hover%;%[endif]%
}
#%id=export_id% a:active {
color: %id=active_color%;
background: %id=active_fill_array[0]%;
background-image: -webkit-linear-gradient(top, %id=active_fill_array[0]%, %id=active_fill_array[1]%);
background-image: -moz-linear-gradient(top, %id=active_fill_array[0]%, %id=active_fill_array[1]%);
background-image: -ms-linear-gradient(top, %id=active_fill_array[0]%, %id=active_fill_array[1]%);
background-image: -o-linear-gradient(top, %id=hover_fill_array[0]%, %id=active_fill_array[1]%);
background-image: linear-gradient(to bottom, %id=active_fill_array[0]%, %id=active_fill_array[1]%);
text-decoration: none;
/* Misc. text formatting */ %[if %id=style_array[0]% ]%font-weight: bold;%[endif]%%[if %id=style_array[1]% ]%font-style: italic;%[endif]%%[if %id=style_array[2]% ]%text-transform: uppercase;%[endif]%%[if %id=style_array[3]% ]%text-decoration: underline;%[endif]%
%[if %("%id=border%" == "false")% ]%/* No border */%[endif]%%[if %("%id=border%" == "true")% ]%border: %id=border_style% %id=border_width% %id=border_active%;%[endif]%
}
#%id=export_id% a:focus {
%[if %("%id=focus_outline%" == "false")% ]%/* No focus outline */%[endif]%%[if %("%id=focus_outline%" == "true")% ]%box-shadow: 0 0 0 %id=outline_width% %id=outline_colour%;%[endif]%
}
HTML markup...
<div id="%id=export_id%" class="button_builder">
<a href="%id=link -href%>%id=label%</a>
</div>
%[endif]%
%%[[endif]]%%