To make a button with special effects, there is a long list of properties that you will need to be familiar with. Here is a Website to play around with these properties and see the change instantly: http://css3please.com/.

In CSS3, rgba() is given as a combination to define color and opacity. So if you define “rgba(255, 255, 255, 0.8)”, opacity is 0.8. The effect will be different from setting opacity property by itself as all child elements will inherit the opacity, while rgba only defines the opacity of a single element.

Below is an example of a form button created using CSS3.

Live Demo

Source code:

1. html file:

 <form> <input class="form_button" type="submit" value="submit" /> </form> 

2. style.css:

input[type="submit"].form_button {
margin-left: 10px;
background-color: #F97100;
width: 180px;
padding: 7px 10px;
color: #026a50;
text-transform: uppercase;
border: 1px solid #2c398d;
font-weight: bold;
font-size: 15px;	
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-border-radius: 5px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9); 	
-moz-box-shadow:  0 4px 0 #ccc;
-webkit-box-shadow:  0 4px 0 #ccc;
-box-shadow:  0 4px 0 #ccc;
-webkit-transition: background 0.2s ease-out;
}

input[type="submit"].form_button:hover, input[type="submit"].form_button:focus {
background: #1ACE07;
border: 1px solid #186ca4;
color:#007241;
}