Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Creating Stylish Buttons Using CSS3

0.00/5 (No votes)
24 Sep 2011 1  
How to create 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:

button.png

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.

Hope you enjoyed it. Thank you.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here