Creating Stylish Buttons Using CSS3

Creating Different Types of Buttons

On a web page, we see many types of buttons and with different shapes and sizes. So, here I am trying to explain how to create a few of them.

Step 1: Creating HTML Document

First of all, create an HTML page with a button tag (we can also use input tag with type="submit"). But here we will apply CSS to button tag only, you can use it for submit button too.

Example

<button class="style">
Button
</button>

Which will look like this:

Step 2: Creating CSS Document

Now, we will add style to it using the CSS (cascaded style sheet).

Now take a look at the CSS document. We will add a background color property to it.

CSS

.style{
width:100px;
height:35px;
font-size:20px;
background:#3e9ad2;
	}

Which will look like this:

Now Add Box-shadow property to it. As all browsers do not support CSS3, there are some vendor prefixes to work on particular browsers, hence we will add all of them.

CSS

-webkit-box-shadow:0 0 4px #000;/*safari and Chrome*/
-moz-box-shadow:0 0 4px #000; /*Mozilla*/
-o-box-shadow:0 0 4px #000; /*Opera*/
-ms-box-shadow:0 0 4px #000; /*Ms IE*/
box-shadow:0 0 4px #000; /*W3C*/
	}

Which will look like this:

Now, we will make the button with the rounded corners using border-radius property which is also a browser specific property.

CSS

-webkit-border-radius:15px;/*safari and Chrome*/
-moz-border-radius:15px; /*Mozilla*/
-o-box-border-radius:15px; /*Opera*/
-ms-box-border-radius:15px; /*Ms IE*/
border-radius:15px; /*W3C*/

Which will look like this:

Now, we will add gradient effect to the button.

CSS

background-image:-webkit-linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
background-image:-moz-linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
background-image:-o-linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
background-image:-ms-linear-gradient(top,#ffffff 0%,#3e9ad2 100%);
background-image:linear-gradient(top,#ffffff 0%,#3e9ad2 100%);

Here is the final look of the button for you.