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
Step 1: Creating an HTML Document
<br/><input type="button" class="button red" value="Apply Settings"/>
<input type="button" class="button green" value="Apply Settings"/></div>
First of all, we are creating two buttons using the above code.
Step 2: Creating CSS Document
padding:8px 10px 8px 10px;
transition:0.2s all ease;
-webkit-transition:0.2s all ease;
-o-transition:0.2s all ease;
-ms-transition:0.2s all ease;
-moz-transition:0.2s all ease;
I have given class name to buttons here as button red and button green (Double Class Selector).
So firstly, I am applying style to
CSS use here is:
- Padding creates space between table border and table content.
->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.
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.
: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!