Crafting PureCSS Buttons

Buttons using css3 is common now but to have your blog reputation more your blog must have unique content, unique design, unique concept, unique title and a responsive yet stylish buttons. So I crafted some of all rounder buttons,

Advantages:

# Look stunning in all backgrounds.
# Adjustable width.
# Responsive background.
# And fantastic text-shadow.
# Double bordered.

Disadvantages:

# The only disadvantage of this button is you can't use it with pure black color.

Let's Start Crafting

F irst have a view of some buttons created for example

Now start Crafting These buttons!!!

First Copy the CSS

.button
{
  display:inline-block;
  background:red;
  padding:0 15px;
  text-align:center;
  font-size:3em;
  background-image:linear-gradient(top,rgba(0,0,0,.2) 35%,transparent 35%);
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,.2) 35%,transparent 35%);
  background-image:-moz-linear-gradient(top,rgba(0,0,0,.2) 35%,transparent 35%);
  background-image:-ms-linear-gradient(top,rgba(0,0,0,.2) 35%,transparent 35%);  border-radius:30px;
  moz-border-radius:30px;
  color: rgba(0,0,0, 0.4);
  text-shadow:0 1px 0 rgba(0,0,0,.1),0 2px 0 rgba(0,0,0,.1),0 3px 0 rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.1);
  border:10px double rgba(255,255,255,.7);
  margin:20px auto;
}
.red
{
  background:red;
   background-image:linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
   background-image:-moz-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
   background-image:-webkit-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
   background-image:-ms-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);}
.pink
{
  background:pink;
   background-image:linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
   background-image:-webkit-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
   background-image:-ms-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
   background-image:-moz-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);}
.minimal
{
  background:#999;
  background-image:linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
  background-image:-moz-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
  background-image:-ms-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);}

Now copy this HTML

<button class="button red">Button-text-red-button</button>
<button class="button pink">Button-text-pink-button</button>
<button class="button minimal">Button-text-minimal-button</button>

Now You're Done Crafting(Copying :D) Buttons!
Found any design related queries / problem,
Then ask me in comment!!!

More about → Crafting PureCSS Buttons