12+ 3D Buttons Using Pure CSS3

Published on June 26, 2013

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.

Live Demo:

Button Button Button Button Button Button Button Button Button Button Button Button

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 #be3077, 0px 1px 1px #be3077, 2px 1px 1px #be3077, 1px 2px 1px #be3077,
    3px 2px 1px #be3077, 2px 3px 1px #be3077, 4px 3px 1px #be3077, 3px 4px 1px #be3077,
    5px 4px 1px #be3077, 4px 5px 1px #be3077, 6px 5px 1px #be3077;
  cursor: pointer;
  display: inline-block;
  font-size: 45px;
}
.btn2 {
  background-color: #1abc9c;
  box-shadow: 1px 0px 1px #16a085, 0px 1px 1px #16a085, 2px 1px 1px #16a085, 1px 2px 1px #16a085,
    3px 2px 1px #16a085, 2px 3px 1px #16a085, 4px 3px 1px #16a085, 3px 4px 1px #16a085,
    5px 4px 1px #16a085, 4px 5px 1px #16a085, 6px 5px 1px #16a085;
}
.btn3 {
  background-color: #2ecc71;
  box-shadow: 1px 0px 1px #27ae60, 0px 1px 1px #27ae60, 2px 1px 1px #27ae60, 1px 2px 1px #27ae60,
    3px 2px 1px #27ae60, 2px 3px 1px #27ae60, 4px 3px 1px #27ae60, 3px 4px 1px #27ae60,
    5px 4px 1px #27ae60, 4px 5px 1px #27ae60, 6px 5px 1px #27ae60;
}
.btn4 {
  background-color: #3498db;
  box-shadow: 1px 0px 1px #2980b9, 0px 1px 1px #2980b9, 2px 1px 1px #2980b9, 1px 2px 1px #2980b9,
    3px 2px 1px #2980b9, 2px 3px 1px #2980b9, 4px 3px 1px #2980b9, 3px 4px 1px #2980b9,
    5px 4px 1px #2980b9, 4px 5px 1px #2980b9, 6px 5px 1px #2980b9;
}
.btn5 {
  background-color: #9b59b6;
  box-shadow: 1px 0px 1px #8e44ad, 0px 1px 1px #8e44ad, 2px 1px 1px #8e44ad, 1px 2px 1px #8e44ad,
    3px 2px 1px #8e44ad, 2px 3px 1px #8e44ad, 4px 3px 1px #8e44ad, 3px 4px 1px #8e44ad,
    5px 4px 1px #8e44ad, 4px 5px 1px #8e44ad, 6px 5px 1px #8e44ad;
}
.btn6 {
  background-color: #34495e;
  box-shadow: 1px 0px 1px #2c3e50, 0px 1px 1px #2c3e50, 2px 1px 1px #2c3e50, 1px 2px 1px #2c3e50,
    3px 2px 1px #2c3e50, 2px 3px 1px #2c3e50, 4px 3px 1px #2c3e50, 3px 4px 1px #2c3e50,
    5px 4px 1px #2c3e50, 4px 5px 1px #2c3e50, 6px 5px 1px #2c3e50;
}
.btn7 {
  background-color: #e67e22;
  box-shadow: 1px 0px 1px #d35400, 0px 1px 1px #d35400, 2px 1px 1px #d35400, 1px 2px 1px #d35400,
    3px 2px 1px #d35400, 2px 3px 1px #d35400, 4px 3px 1px #d35400, 3px 4px 1px #d35400,
    5px 4px 1px #d35400, 4px 5px 1px #d35400, 6px 5px 1px #d35400;
}
.btn8 {
  background-color: #f1c40f;
  box-shadow: 1px 0px 1px #f39c12, 0px 1px 1px #f39c12, 2px 1px 1px #f39c12, 1px 2px 1px #f39c12,
    3px 2px 1px #f39c12, 2px 3px 1px #f39c12, 4px 3px 1px #f39c12, 3px 4px 1px #f39c12,
    5px 4px 1px #f39c12, 4px 5px 1px #f39c12, 6px 5px 1px #f39c12;
}
.btn9 {
  background-color: #e74c3c;
  box-shadow: 1px 0px 1px #c0392b, 0px 1px 1px #c0392b, 2px 1px 1px #c0392b, 1px 2px 1px #c0392b,
    3px 2px 1px #c0392b, 2px 3px 1px #c0392b, 4px 3px 1px #c0392b, 3px 4px 1px #c0392b,
    5px 4px 1px #c0392b, 4px 5px 1px #c0392b, 6px 5px 1px #c0392b;
}
.btn10 {
  color: #444;
  background-color: #ecf0f1;
  box-shadow: 1px 0px 1px #bdc3c7, 0px 1px 1px #bdc3c7, 2px 1px 1px #bdc3c7, 1px 2px 1px #bdc3c7,
    3px 2px 1px #bdc3c7, 2px 3px 1px #bdc3c7, 4px 3px 1px #bdc3c7, 3px 4px 1px #bdc3c7,
    5px 4px 1px #bdc3c7, 4px 5px 1px #bdc3c7, 6px 5px 1px #bdc3c7;
}
.btn11 {
  background-color: #95a5a6;
  box-shadow: 1px 0px 1px #7f8c8d, 0px 1px 1px #7f8c8d, 2px 1px 1px #7f8c8d, 1px 2px 1px #7f8c8d,
    3px 2px 1px #7f8c8d, 2px 3px 1px #7f8c8d, 4px 3px 1px #7f8c8d, 3px 4px 1px #7f8c8d,
    5px 4px 1px #7f8c8d, 4px 5px 1px #7f8c8d, 6px 5px 1px #7f8c8d;
}
.btn12 {
  color: #444;
  background-color: #ddd;
  box-shadow: 1px 0px 1px #aaa, 0px 1px 1px #aaa, 2px 1px 1px #aaa, 1px 2px 1px #aaa,
    3px 2px 1px #aaa, 2px 3px 1px #aaa, 4px 3px 1px #aaa, 3px 4px 1px #aaa, 5px 4px 1px #aaa, 4px
      5px 1px #aaa, 6px 5px 1px #aaa;
}

That’s it hope yo like it.