Click here to Skip to main content
11,631,710 members (71,980 online)
Click here to Skip to main content

Tagged as

Creating Stylish Buttons Using CSS3

, 25 Sep 2011 CPOL 29.6K 35
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.


<button class="style">

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.



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.


-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.


-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.


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.


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

You may also be interested in...

Comments and Discussions

GeneralIE8 not supported Pin
pclion29-May-12 4:55
memberpclion29-May-12 4:55 
GeneralRe: IE8 not supported Pin
denko-z6-Aug-12 0:28
memberdenko-z6-Aug-12 0:28 
GeneralMy vote of 5 Pin
preetih19-Jan-12 21:02
memberpreetih19-Jan-12 21:02 
GeneralMy vote of 5 Pin
Anurag Gandhi20-Dec-11 2:27
memberAnurag Gandhi20-Dec-11 2:27 
QuestionIE9 and Opera are FUBAR Pin
clintonG26-Sep-11 9:26
memberclintonG26-Sep-11 9:26 
AnswerRe: IE9 and Opera are FUBAR Pin
Jakub Januszkiewicz28-Sep-11 10:47
memberJakub Januszkiewicz28-Sep-11 10:47 
GeneralRe: IE9 and Opera are FUBAR Pin
clintonG28-Sep-11 16:34
memberclintonG28-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 | Terms of Use | Mobile
Web03 | 2.8.150723.1 | Last Updated 25 Sep 2011
Article Copyright 2011 by SandipRNirmal
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid