Thursday 26 June 2014

3-D Buttons

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

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. Here is the CSSDeck's live demo of buttons.





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')


1
.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'.


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




3
.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 design.

Wanna ask/say something, comment down here!
Share This Article, Choose Your Platform!
I have completed this article in hours with a lot of effort, you have to just click a button to get updated with more such articles in future.Like our facebook page.

No comments:

Post a Comment

© Hilreative All rights reserved | Theme Designed by Seo Blogger Templates