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

Tagged as

Creating Smart and Stylish Button

, 27 Jun 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Easy, simple, stylish button created using HTML and CSS

Creating a Smart and Stylish Button

All of us have seen different types of buttons in different websites. So, here, we are going to create a simple and stylish Button.

Step 1: Creating an HTML Document

<body bgcolor="black">
<div class="content">
<br/><input type="button" class="button red" value="Apply Settings"/>&nbsp;&nbsp;
<input type="button" class="button green" value="Apply Settings"/></div>

First of all, we are creating two buttons using the above code.


Button HTML view

Step 2: Creating CSS Document

padding:8px 10px 8px 10px;
transition:0.2s all ease;
-webkit-transition:0.2s all ease;/*for Chrome and Safari*/
-o-transition:0.2s all ease;/*For Opera*/
-ms-transition:0.2s all ease;/*For I.E.*/
-moz-transition:0.2s all ease;/*For Mozilla*/

I have given class name to buttons here as button red and button green (Double Class Selector).

So firstly, I am applying style to .button.


CSS use here is:

  • Padding creates space between table border and table content.
  • Transition can add effect when changing from one Style to another, without using Flash Animation and JavaScript

->Opacity used for Transparency

border-left:4px solid #d9522c;
border-left:4px solid #009900;

Here we are setting Text Color and Background-Color for Button.

So, why do we use Border-Left here? Actually, in the next step, we are going to give :hover effect. If we do not use Border-left here than position of our button moves 4px towards right and size of button changes on hovering which we don't want.


colored button


border-left:4px solid white;

When we hover the mouse over the button then value of Opacity Changes From 0.9 to 1, border-left color to white and cursor is Pointer, which add a stylish look on hovering.




The :active pseudo selector will match when an element is being pressed down on by the mouse Cursor.

Here is a final look at the button that we have created.


Hope you like 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

Anoop Kr Sharma
India India
Visit my
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

QuestionStylish Buttons PinmemberMember 1068504313-Dec-14 5:48 
GeneralRe: Stylish Buttons PinprofessionalAnoop Kr Sharma13-Dec-14 7:45 
GeneralMy vote of 5 PinmemberMohammad Sharify12-Aug-13 6:56 
GeneralRe: My vote of 5 PinprofessionalAnoop Kr Sharma12-Aug-13 7:10 
GeneralRe: My vote of 5 PinmemberMohammad Sharify12-Aug-13 7:41 
GeneralRe: My vote of 5 PinprofessionalAnoop Kr Sharma13-Aug-13 9:05 
GeneralMy vote of 4 Pinmemberpritam hinger1-Jul-13 21:58 
GeneralRe: My vote of 4 PinprofessionalAnoop Kr Sharma3-Jul-13 1:39 
GeneralMy vote of 4 PinmemberSalatiel Bairros28-Jun-13 10:28 
GeneralRe: My vote of 4 PinprofessionalAnoop Kr Sharma28-Jun-13 16:54 
QuestionI love it Pinmembernimanima27-Jun-13 9:48 
AnswerRe: I love it PinprofessionalAnoop Kr Sharma28-Jun-13 16:56 

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
Web04 | 2.8.150129.1 | Last Updated 27 Jun 2013
Article Copyright 2013 by Anoop Kr Sharma
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid