Amazing Beveled Buttons Using CSS3

Creating buttons with CSS3 is really a nice way to create buttons with different styles. But its bit uncomfortable to create extra ordinary buttons with CSS only. And more that you can easily create buttons with bevel in photoshop but its hard to create button with css only, so i just wanted to share buttons i created with css only and almost its having bevel in it.
Have a Look

Buttons

Live Demo [Working Buttons !!] 

How it's Made ?

This awesome buttons made by CSS3 and some nice effort. We have made this buttons for make it use for "Live Demo" buttons or "Download" Buttons etc...

These buttons can also use in quick action buttons like 50% off or any other offer you provide. anyway let's have a look at its CSS3 and HTML5,

To add it to blogger,

you'll need to add CSS to your template,

for that just follow the steps,

# Open the Blogger Dashboard

# Navigate to Template click on edit template,

# Find "]]></b:skin" and add following css code just above that line,

CSS CODE

.button
{
  cursor:pointer;
  text-align:center;
  padding:20px;
  border:2px solid rgba(255,255,255,.8);
  background:grey;
  width:250px;
  border-radius:150px;
  color:white;
  font:normal 40px 'sans-serif';
  box-shadow:0 5px 3px #000;
  -moz-box-shadow:0 5px 3px #000;
  -webkit-box-shadow:0 5px 3px #000;
  -ms-box-shadow:0 5px 3px #000;
  -o-box-shadow:0 5px 3px #000;
  transition:300ms ease-in-out;
  -ms-transition:300ms ease-in-out;
  -moz-transition:300ms ease-in-out;
  -webkit-transition:300ms ease-in-out;
  -o-transition:300ms ease-in-out;
}
.button:hover
{
  box-shadow:0 10px 4px #000;
  -moz-box-shadow:0 10px 4px #000;
  -o-box-shadow:0 10px 4px #000;
  -ms-box-shadow:0 10px 4px #000;
  -webkit-box-shadow:0 10px 4px #000;
  transform:translateY(-5px);
  -ms-transform:translateY(-5px);
  -o-transform:translateY(-5px);
  -webkit-transform:translateY(-5px);
  -moz-transform:translateY(-5px);
}
.button:active
{
  box-shadow:0 0 2px #000,inset 0 10px 5px #000;
  -ms-box-shadow:0 0 2px #000,inset 0 10px 5px #000;
  -o-box-shadow:0 0 2px #000,inset 0 10px 5px #000;
  -moz-box-shadow:0 0 2px #000,inset 0 10px 5px #000;
  -webkit-box-shadow:0 0 2px #000,inset 0 10px 5px #000;
  transform:translateY(10px);
  -ms-transform:translateY(10px);
  -o-transform:translateY(10px);
  -webkit-transform:translateY(10px);
  -moz-transform:translateY(10px);
}

After adding this code just save the template, now go ahead adding buttons and customizing its style,
now we will add buttons to the website or blog,
Now select the place where you want to render those buttons just like inside widget or inside post or any page,
And copy this html code with your need to be show this awesome CSS3 buttons,

HTML CODE

<div class="button">Live Demo</div>

# Now you're done adding button to your desired place.
We'll right back with its different styles as shown in photo ...
Here is just rounded shaped button.
If any query then send us a mail or comment here ...