Here I will show how to create the push effect css button very simple. Now in the UI design all people are expected the effect on the screen like that bounce, waves, etc., I will show create the button when you click with real clicking effect. They are lots of css button source code available in the internet for free. How to create the Button yourself easily. Follow the below code.
CSS CODE:
.puch-button a{
padding: 10px;
background-color: #139EC0;
color: #ffffff;
border-radius: 4px;
text-decoration: none;
float: left;
border-bottom: 6px solid #0F6377;/* This size is 6px here */
margin: 1px 0px 0 5px; /* Margin top size is 1px here */
}
.puch-button a:active{
border-bottom: 1px solid #0F6377; /* When i click the button border size will be 1px */
margin: 5px 0px 0 5px; /* When i click the button margin top will be 5px */
}HTML CODE:
<div class="puch-button"> <a href="#">Download</a> </div>
Here you will not the size of the border-bottom and margin size of the button. When before click and at the time of when you click. Before click the size of the border-bottom is 6px and margin top will be 1px. Now you see the size of the border-bottom and margin top at the time of your clickbborder-bottom will be 1px and margin-top will be 5px. Reverse of the size. This thing only bring the click effect to your button. The 5px replace by 1px and 1px can be replaced by 5px.
