Click here to Skip to main content
12,512,068 members (51,032 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

21.5K views
294 downloads
9 bookmarked
Posted

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>
</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)

Share

About the Author

Anoop Kr Sharma
Student
India India

You may also be interested in...

Comments and Discussions

 
QuestionStylish Buttons Pin
Member 1068504313-Dec-14 4:48
memberMember 1068504313-Dec-14 4:48 
GeneralRe: Stylish Buttons Pin
Anoop Kr Sharma13-Dec-14 6:45
professionalAnoop Kr Sharma13-Dec-14 6:45 
GeneralMy vote of 5 Pin
Mohammad Sharify12-Aug-13 5:56
memberMohammad Sharify12-Aug-13 5:56 
GeneralRe: My vote of 5 Pin
Anoop Kr Sharma12-Aug-13 6:10
professionalAnoop Kr Sharma12-Aug-13 6:10 
GeneralRe: My vote of 5 Pin
Mohammad Sharify12-Aug-13 6:41
memberMohammad Sharify12-Aug-13 6:41 
GeneralRe: My vote of 5 Pin
Anoop Kr Sharma13-Aug-13 8:05
professionalAnoop Kr Sharma13-Aug-13 8:05 
GeneralMy vote of 4 Pin
pritam hinger1-Jul-13 20:58
memberpritam hinger1-Jul-13 20:58 
GeneralRe: My vote of 4 Pin
Anoop Kr Sharma3-Jul-13 0:39
professionalAnoop Kr Sharma3-Jul-13 0:39 
GeneralMy vote of 4 Pin
Salatiel Bairros28-Jun-13 9:28
memberSalatiel Bairros28-Jun-13 9:28 
GeneralRe: My vote of 4 Pin
Anoop Kr Sharma28-Jun-13 15:54
professionalAnoop Kr Sharma28-Jun-13 15:54 
QuestionI love it Pin
nimanima27-Jun-13 8:48
membernimanima27-Jun-13 8:48 
AnswerRe: I love it Pin
Anoop Kr Sharma28-Jun-13 15:56
professionalAnoop Kr Sharma28-Jun-13 15:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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.160929.1 | Last Updated 27 Jun 2013
Article Copyright 2013 by Anoop Kr Sharma
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid