Click here to Skip to main content
15,867,568 members
Articles / Web Development / HTML
Tip/Trick

Creating Smart and Stylish Button

Rate me:
Please Sign up or sign in to vote.
4.23/5 (8 votes)
27 Jun 2013CPOL1 min read 36K   323   8   12
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

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

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

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

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

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)


Written By
Student
India India

Comments and Discussions

 
QuestionStylish Buttons Pin
Member 1068504313-Dec-14 4:48
Member 1068504313-Dec-14 4:48 
Nice I Like It and Informative Thumbs Up | :thumbsup:
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
Mohammad 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
Mohammad 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
pritam 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
professionalSalatiel 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
nimanima27-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.