Click here to Skip to main content
11,410,750 members (62,902 online)
Click here to Skip to main content

Tagged as

Creating Stylish Buttons Using CSS3

, 25 Sep 2011 CPOL
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

Comments and Discussions

GeneralIE8 not supported Pinmemberpclion29-May-12 5:55 
GeneralRe: IE8 not supported Pinmemberdenko-z6-Aug-12 1:28 
GeneralMy vote of 5 Pinmemberpreetih19-Jan-12 22:02 
GeneralMy vote of 5 PinmemberAnurag Gandhi20-Dec-11 3:27 
QuestionIE9 and Opera are FUBAR PinmemberclintonG26-Sep-11 10:26 
AnswerRe: IE9 and Opera are FUBAR PinmemberJakub Januszkiewicz28-Sep-11 11:47 
GeneralRe: IE9 and Opera are FUBAR PinmemberclintonG28-Sep-11 17: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
Web02 | 2.8.150414.5 | Last Updated 25 Sep 2011
Article Copyright 2011 by SandipRNirmal
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid