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

Creating Smart and Stylish Button

, 27 Jun 2013
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>
</body> 

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

Preview

Button HTML view

Step 2: Creating CSS Document

.button
{
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*/
opacity:0.9;
border:none;
} 

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.

Preview

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

CSS

.button.red
{
background-color:#d9522c;
border-left:4px solid #d9522c;
color:white;
}
.button.green
{
background-color:#009900;
color:white;
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.

Preview

colored button

CSS

.button:hover
{
opacity:1;
border-left:4px solid white;
cursor:pointer;
}   

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.

Preview

CSS

.button:active
{
color:white;
background-color:#191919;
}  

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.

Preview

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

Anoop Kr Sharma
Student
India India
No Biography provided
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinmemberMohammad Sharify12-Aug-13 5:56 
GeneralRe: My vote of 5 PinprofessionalAnoop Kr Sharma12-Aug-13 6:10 
GeneralRe: My vote of 5 PinmemberMohammad Sharify12-Aug-13 6:41 
GeneralRe: My vote of 5 PinprofessionalAnoop Kr Sharma13-Aug-13 8:05 
GeneralMy vote of 4 Pinmemberpritam hinger1-Jul-13 20:58 
GeneralRe: My vote of 4 PinprofessionalAnoop Kr Sharma3-Jul-13 0:39 
GeneralMy vote of 4 PinmemberSalatiel Bairros28-Jun-13 9:28 
GeneralRe: My vote of 4 PinprofessionalAnoop Kr Sharma28-Jun-13 15:54 
QuestionI love it Pinmembernimanima27-Jun-13 8:48 
AnswerRe: I love it PinprofessionalAnoop Kr Sharma28-Jun-13 15: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 | Mobile
Web01 | 2.8.140721.1 | Last Updated 27 Jun 2013
Article Copyright 2013 by Anoop Kr Sharma
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid