Easiest way to make 3-D like buttons using CSS in just 3 steps!

June 26, 201412 yr

If you own a website you gonna need buttons somewhere on your website like i have made down here for 'DEMO'. Here is the easiest way to make 3-D like buttons with CSS only.

Hilreative Blueprint

> A div with 'border-bottom' only,that will give it a 3-D kind of effect.

> Change in size of div on hover as if it is being pressed(with a gradient to emphasize the pressing effect).

Lets start with our HTML code.



<div class="Container">

    <div class="button stopButton">

     Stop

    </div>

</div>

<div class="Container">  

    <div class="button goButton">

    Go

   </div>

<div>

We are designing two buttons one rectangular other oval,so just made two divs with their containers, now we are going to style them in CSS.('button' class is given for same styles to be added on two divs and for their individual styles there are two separate classes 'stopButton' and 'goButton')



.button{

width:200px;

height:80px;

line-height:80px;

text-align:center;

font-size:50px;

color:white; 

}

Hilreative Trick

> How to center a single line text vertically in a div?

Give it a 'line-height' of same length as of its 'height'.



.stopButton{

background:#E80101;

border-bottom:solid 5px #AB1806;

border-radius:5px;  

  }


.goButton{

  border-radius:50%;

  background:#12A3D3;;

  border-bottom:solid 6px #294694;

}


.Container{

 width:200px; 

  height:85px;

margin:50px auto;

  }

Note- Do not give large borders, button will loose its 3-D essence.

Hilreative Trick

> How to center a div horizontally?

Give top and bottom margin as per your requirement but right and left,'auto' so that it will automatically adjust itself to the center.



.button:hover{

position:relative;

top:5px;

 left:5px;

border-bottom:none;

width:190px;

cursor:pointer;


}


.stopButton:hover{background: -webkit-linear-gradient(#E80101,#AB1806); /* For Safari 5.1 to 6.0 */

  background: -o-linear-gradient(#E80101,#AB1806); /* For Opera 11.1 to 12.0 */

  background: -moz-linear-gradient(#E80101,#AB1806); /* For Firefox 3.6 to 15 */

  background: linear-gradient(#E80101,#AB1806); /* Standard syntax */


}


.goButton:hover{

   background: -webkit-linear-gradient(#12A3D3,#294694); /* For Safari 5.1 to 6.0 */

  background: -o-linear-gradient(#E80101,#AB1806); /* For Opera 11.1 to 12.0 */

  background: -moz-linear-gradient(#E80101,#AB1806); /* For Firefox 3.6 to 15 */

  background: linear-gradient(#12A3D3,#294694); /* Standard syntax */


}

Cursor is made pointer on hover,border-bottom is removed,(just removing the border will not do the job, button should move in a way that it appears to be pressed).

Width is reduced by 10 px(as button will go down it should appear little bit smaller) and positioned the button relatively 5 px from top and 5 px from left to give it a effect as if it is being pressed.

Now you must be thinking why we have given containers , here is why, we are reducing button's size,had container not been there whole page would have been moved with the reduced width of the buttons. (see yourself by removing containers)

Finally a gradient is added to complete the hilreative design.

original article with demo

http://hilreative.blogspot.in/2014/06/3-d-buttons.html

For more such tutorials, join us on facebook

https://www.facebook.com/hilreative