Tips and Tricks

Cross-Browser-Compatible Button Styles using CSS Code

 

Arclab Web Form Builder uses CSS code to style form buttons.
It includes a wide range of pre-defined button styles, but you can also add your own style.

 

Go to "Custom Style" to to edit the selected style (or use <Default Button Style> to clear all styles and add your own code in "Custom Styles")

Edit Style

You can enter regular CSS code in the edit field.

 

The following shows some descriptions and samples.
Please take a look at the CSS manual for a complete description of the css properties:
http://www.w3schools.com/css/default.asp

 

Border:

border: 1px solid #000000; /* for a 1 pixel solid black border */

border:0; /* for no border(!) */

 

Border Shadow:

box-shadow: h-offset(in pixel) v-offset(in pixel) blur(in pixel) color

-webkit-box-shadow: 0px 0px 2px #000000;
-moz-box-shadow: 0px 0px 2px #000000;
box-shadow: 0px 0px 2px #000000;

 

Background Color:

background-color: #FFFFFF; /* for a white background */

background:none; /* for no background(!) */

 

Gradient Background:

The following sample will show a gradient from top #81B64C to bottom #6A9641:

background-color:#81B64C; /* fallback */

background-image: -moz-linear-gradient(top, #81B64C 0%, #6A9641 100%);

background-image: -webkit-gradient(linear,left top,left bottom,from(#81B64C),to(#6A9641));

background-image: -webkit-linear-gradient(top, #81B64C 0%, #6A9641 100%);

background-image: -o-linear-gradient(top, #81B64C 0%, #6A9641 100%);

background-image: -ms-linear-gradient(top, #81B64C 0% ,#6A9641 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81B64C', endColorstr='#6A9641',GradientType=0 ); /* for old IE */

background-image: linear-gradient(top, #81B64C 0% ,#6A9641 100%);

 

Background Image (for Image Button):

background: transparent;
background-image: url("http://www.yourdomain.tld/image/next-button.png"); /* or "/image/next-button.png" */
border: 0;
width: 60px; /* image-width */
height: 20px; /* image-height */

text-indent: -9999px; /* remove text from button */
overflow: hidden;

 

Button Text:

text-decoration:none; /* no underline */
text-align: center; /* centered text */
padding: 5px 10px; /* padding top/bottom left/right */
color:#000000; /* text color */
font-size: 15px; /* font size in px or pt */
font-familiy: Arial, sans-serif; /* font family with fallback */