Home / Frontend Codes and Demos / CSS Code Demos / CSS buttons with flat colors & 3D push effects
CSS buttons with flat colors & 3D push effects

Creating CSS buttons with flat colors & 3D push effects using only css3 and HTML. Demo and Download available.

CSS buttons with flat colors & 3D push effects

CSS buttons with flat colors & 3D push effects

Creating CSS buttons with flat colors & 3D push effects using only css3 and HTML. Demo and Download available.

Demo Download

Author Kanishk Kunal
Hits
Created NOVEMBER 27, 2014
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Snippet

<h1>3D CSS Buttons</h1> <br> <a href="#" class="button-3d">Push Me</a> <a href="#" class="button-3d">Push Me</a><br> <a href="https://superdevresources.com/3d-css-button/" target="_blank" class="button-3d">3D Buttons</a>

CSS Code

/* Post at: https://superdevresources.com/3d-css-button/ */ body {   text-align: center;   color:#ecf0f1;   background-color: #2c3e50;   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;   margin-top: 20px; }  .button-3d {   position:relative;   width: auto;   display:inline-block;   color:#ecf0f1;   text-decoration:none;   border-radius:5px;   border:solid 1px #f39c12;   background:#e67e22;   text-align:center;   padding:16px 18px 14px;   margin: 12px;      -webkit-transition: all 0.1s; 	-moz-transition: all 0.1s; 	transition: all 0.1s; 	   -webkit-box-shadow: 0px 6px 0px #d35400;   -moz-box-shadow: 0px 6px 0px #d35400;   box-shadow: 0px 6px 0px #d35400; }  .button-3d:active{     -webkit-box-shadow: 0px 2px 0px #d35400;     -moz-box-shadow: 0px 2px 0px #d35400;     box-shadow: 0px 2px 0px #d35400;     position:relative;     top:4px; }

Preview

CSS buttons with flat colors & 3D push effects preview

About CV

I'm frontend developer

Check Also

Naturalized Checkbox Toggle Switches

This demo is a response to a post by Marcus Connor addressing confusion with checkbox …