Click here to Skip to main content
Click here to Skip to main content

Creating Stylish Buttons Using CSS3

, 25 Sep 2011
Rate this:
Please Sign up or sign in to vote.
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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

No Biography provided

Comments and Discussions

 
GeneralIE8 not supported Pinmemberpclion29-May-12 4:55 
GeneralRe: IE8 not supported Pinmemberdenko-z6-Aug-12 0:28 
GeneralMy vote of 5 Pinmemberpreetih19-Jan-12 21:02 
GeneralMy vote of 5 PinmemberAnurag Gandhi20-Dec-11 2:27 
QuestionIE9 and Opera are FUBAR PinmemberclintonG26-Sep-11 9:26 
AnswerRe: IE9 and Opera are FUBAR PinmemberJakub Januszkiewicz28-Sep-11 10:47 
GeneralRe: IE9 and Opera are FUBAR PinmemberclintonG28-Sep-11 16:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 25 Sep 2011
Article Copyright 2011 by SandipRNirmal
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid