Creating Smart and Stylish Button

Anoop Kr Sharma

4.23/5 (8 votes)

Jun 27, 2013

CPOL

1 min read

36911

323

Easy, simple, stylish button created using HTML and CSS

Download source - 560 B

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

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

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!