Free CSS Form Buttons

Written by Lance Padgett on November 1, 2012

Posted in Form Design

We want to continue to help you improve and add more customization to your online forms. So we built out 3 custom css buttons that you can use on your forms.

Copy and paste one of the codes below, and place it in your custom form theme in the ‘Additional HTML and CSS’ box to use one of these awesome form buttons.

css button blue

.fsSubmit input.fsSubmitButton {
background-image:url(http://img846.imageshack.us/img846/4822/arrowk.jpg);background-repeat:no-repeat;background-position: right; margin: 0 auto; clear: both; font-size: 24px; color: white; border: none; border-radius: 1000px; font-family: 'Ubuntu'; box-shadow: 0px 1px 1px #C5C5C5;text-shadow:#B7BEC5 -1px 1px 1px, 0px -1px 1px #181818; height: 40px; text-align: left;padding: 0px 60px 0px 30px;

.fsSubmit input.fsSubmitButton:hover {
box-shadow: 0px 1px 10px #7c7c7c;
cursor:pointer;}
}

 

This awesome red button will transition to black when your visitor hovers over it!

css button red

@import url(http://fonts.googleapis.com/css?family=Krona+One);

.fsSubmit input.fsSubmitButton {
background: rgb(204,0,0); /* Old browsers */;
margin: 0 auto; clear: both;
font-size: 21px;
color: white;
border: none;
border-radius: 1000px;
font-family: 'Krona One', sans-serif;
box-shadow: 0px 1px 1px #C5C5C5;
text-shadow:#B7BEC5 -1px 1px 1px, 0px -1px 1px #181818;
padding: 10px 30px;
}

.fsSubmit input.fsSubmitButton:hover {
box-shadow: 0px 1px 10px #7c7c7c;
cursor:pointer;
background-color:#000;
-moz-transition: background-color 1s, box-shadow 1s;
-webkit-transition: background-color 1s, box-shadow 1s;
transition: background-color 1s, box-shadow 1s;
}

 

This awesome green button will transition to a darker green when your visitor hovers over it!

css button green

@import url(http://fonts.googleapis.com/css?family=Sanchez);

.fsSubmit input.fsSubmitButton {
background: #b4df5b; /* Old browsers */
margin: 0 auto; clear: both;
font-size: 24px;
color: white;
border:1px solid rgba(121, 145, 115, 0.25);
border-radius: 12px;
font-family: 'Sanchez', serif;
box-shadow: 0px 1px 1px #C5C5C5;
text-shadow:1px 1px 1px rgba(102, 102, 102, 0.7);
padding: 10px 30px;
}

.fsSubmit input.fsSubmitButton:hover {
box-shadow: 0px 1px 5px #7c7c7c;
cursor:pointer;
background-color: #8fc800;
-moz-transition: background-color 0.5s, box-shadow 0.5s;
-webkit-transition: background-color 0.5s, box-shadow 0.5s;
transition: background-color 0.5s, box-shadow 0.5s;
}

 

Copy and paste in this box on your form theme.
additional css box