Tips and Tricks

Cross-Browser-Compatible Button Styles using CSS Code

Build Online Forms for your Web Site

Arclab® Web Form Builder the HTML form creation software for Windows PC to create email contact forms and php forms with ease. Build HTML forms on your PC and upload the forms to your own web site.

Learn more

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:



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 */