Techumber

12+ 3D Buttons Using Pure CSS3

Github avatar
Dimpu
June 26, 2013. 8 min read

I started creating these buttons for one of my project. Here I am shearing these buttons with you. You can use them in your projects. I created this button using Pure CSS3. I used Flat UI framework colors for creating these buttons, because these colors are most amazing colors which can be blended in any template easily.  Check out the latest demo below. 12+ 3D Buttons Using Pure CSS3

Download

Live Demo:

HTML

<section class="contant">
<button class="button btn1" >Button</button>
<button class="button btn2" >Button</button>
<button class="button btn3" >Button</button>
<button class="button btn4" >Button</button>
<button class="button btn5" >Button</button>
<button class="button btn6" >Button</button>
<button class="button btn7" >Button</button>
<button class="button btn8" >Button</button>
<button class="button btn9" >Button</button>
<button class="button btn10" >Button</button>
<button class="button btn11" >Button</button>
<button class="button btn12" >Button</button>
</section>

CSS3

.button{
padding: 10px;
padding-bottom: 2px;
background-color: deepPink;
margin: 10px;
color: white;
text-shadow: none;
box-shadow: 1px 0px 1px #BE3077undefined 0px 1px 1px #BE3077undefined 2px 1px 1px #BE3077undefined 1px 2px 1px #BE3077undefined 3px 2px 1px #BE3077undefined 2px 3px 1px #BE3077undefined 4px 3px 1px #BE3077undefined 3px 4px 1px #BE3077undefined 5px 4px 1px #BE3077undefined 4px 5px 1px #BE3077undefined 6px 5px 1px #BE3077;
cursor: pointer;
display: inline-block;
font-size: 45px;
}
.btn2{
background-color: #1abc9c;
box-shadow: 1px 0px 1px #16A085undefined 0px 1px 1px #16A085undefined 2px 1px 1px #16A085undefined 1px 2px 1px #16A085undefined 3px 2px 1px #16A085undefined 2px 3px 1px #16A085undefined 4px 3px 1px #16A085undefined 3px 4px 1px #16A085undefined 5px 4px 1px #16A085undefined 4px 5px 1px #16A085undefined 6px 5px 1px #16A085;
}
.btn3{
background-color: #2ECC71;
box-shadow: 1px 0px 1px #27AE60undefined 0px 1px 1px #27AE60undefined 2px 1px 1px #27AE60undefined 1px 2px 1px #27AE60undefined 3px 2px 1px #27AE60undefined 2px 3px 1px #27AE60undefined 4px 3px 1px #27AE60undefined 3px 4px 1px #27AE60undefined 5px 4px 1px #27AE60undefined 4px 5px 1px #27AE60undefined 6px 5px 1px #27AE60;
}
.btn4{
background-color: #3498DB;
box-shadow: 1px 0px 1px #2980B9undefined 0px 1px 1px #2980B9undefined 2px 1px 1px #2980B9undefined 1px 2px 1px #2980B9undefined 3px 2px 1px #2980B9undefined 2px 3px 1px #2980B9undefined 4px 3px 1px #2980B9undefined 3px 4px 1px #2980B9undefined 5px 4px 1px #2980B9undefined 4px 5px 1px #2980B9undefined 6px 5px 1px #2980B9;
}
.btn5{
background-color: #9B59B6;
box-shadow: 1px 0px 1px #8E44ADundefined 0px 1px 1px #8E44ADundefined 2px 1px 1px #8E44ADundefined 1px 2px 1px #8E44ADundefined 3px 2px 1px #8E44ADundefined 2px 3px 1px #8E44ADundefined 4px 3px 1px #8E44ADundefined 3px 4px 1px #8E44ADundefined 5px 4px 1px #8E44ADundefined 4px 5px 1px #8E44ADundefined 6px 5px 1px #8E44AD;
}
.btn6{
background-color: #34495E;
box-shadow: 1px 0px 1px #2C3E50undefined 0px 1px 1px #2C3E50undefined 2px 1px 1px #2C3E50undefined 1px 2px 1px #2C3E50undefined 3px 2px 1px #2C3E50undefined 2px 3px 1px #2C3E50undefined 4px 3px 1px #2C3E50undefined 3px 4px 1px #2C3E50undefined 5px 4px 1px #2C3E50undefined 4px 5px 1px #2C3E50undefined 6px 5px 1px #2C3E50;
}
.btn7{
background-color: #E67E22;
box-shadow: 1px 0px 1px #D35400undefined 0px 1px 1px #D35400undefined 2px 1px 1px #D35400undefined 1px 2px 1px #D35400undefined 3px 2px 1px #D35400undefined 2px 3px 1px #D35400undefined 4px 3px 1px #D35400undefined 3px 4px 1px #D35400undefined 5px 4px 1px #D35400undefined 4px 5px 1px #D35400undefined 6px 5px 1px #D35400;
}
.btn8{
background-color: #F1C40F;
box-shadow: 1px 0px 1px #F39C12undefined 0px 1px 1px #F39C12undefined 2px 1px 1px #F39C12undefined 1px 2px 1px #F39C12undefined 3px 2px 1px #F39C12undefined 2px 3px 1px #F39C12undefined 4px 3px 1px #F39C12undefined 3px 4px 1px #F39C12undefined 5px 4px 1px #F39C12undefined 4px 5px 1px #F39C12undefined 6px 5px 1px #F39C12;
}
.btn9{
background-color: #E74C3C;
box-shadow: 1px 0px 1px #C0392Bundefined 0px 1px 1px #C0392Bundefined 2px 1px 1px #C0392Bundefined 1px 2px 1px #C0392Bundefined 3px 2px 1px #C0392Bundefined 2px 3px 1px #C0392Bundefined 4px 3px 1px #C0392Bundefined 3px 4px 1px #C0392Bundefined 5px 4px 1px #C0392Bundefined 4px 5px 1px #C0392Bundefined 6px 5px 1px #C0392B;
}
.btn10{
color: #444;
background-color: #ECF0F1;
box-shadow: 1px 0px 1px #BDC3C7undefined 0px 1px 1px #BDC3C7undefined 2px 1px 1px #BDC3C7undefined 1px 2px 1px #BDC3C7undefined 3px 2px 1px #BDC3C7undefined 2px 3px 1px #BDC3C7undefined 4px 3px 1px #BDC3C7undefined 3px 4px 1px #BDC3C7undefined 5px 4px 1px #BDC3C7undefined 4px 5px 1px #BDC3C7undefined 6px 5px 1px #BDC3C7;
}
.btn11{
background-color: #95A5A6;
box-shadow: 1px 0px 1px #7F8C8Dundefined 0px 1px 1px #7F8C8Dundefined 2px 1px 1px #7F8C8Dundefined 1px 2px 1px #7F8C8Dundefined 3px 2px 1px #7F8C8Dundefined 2px 3px 1px #7F8C8Dundefined 4px 3px 1px #7F8C8Dundefined 3px 4px 1px #7F8C8Dundefined 5px 4px 1px #7F8C8Dundefined 4px 5px 1px #7F8C8Dundefined 6px 5px 1px #7F8C8D;
}
.btn12{
color: #444;
background-color: #ddd;
box-shadow: 1px 0px 1px #aaaundefined 0px 1px 1px #aaaundefined 2px 1px 1px #aaaundefined 1px 2px 1px #aaaundefined 3px 2px 1px #aaaundefined 2px 3px 1px #aaaundefined 4px 3px 1px #aaaundefined 3px 4px 1px #aaaundefined 5px 4px 1px #aaaundefined 4px 5px 1px #aaaundefined 6px 5px 1px #aaa;
}

That’s it hope yo like it.


...