Creating button with gradients in CSS - html

Question

What i am trying to achieve is simple. A client wants this button:
http://i59.tinypic.com/207b56p.png
provided in the design PSDs replicated in html. I have been playing around with different gradients and such and have only been able to achieve this:
background-image: -webkit-gradient(linear, left top, left bottom, from(#FEC1F4), to(#FF2DFF));
background-image: -webkit-linear-gradient(top, #FEC1F4, #FF2DFF);
background-image: -moz-linear-gradient(top, #FEC1F4, #FF2DFF);
background-image: -ms-linear-gradient(top, #FEC1F4, #FF2DFF);
background-image: -o-linear-gradient(top, #FEC1F4, #FF2DFF);
background-image: linear-gradient(to bottom, #FEC1F4, #FF2DFF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FEC1F4, endColorstr=#FF2DFF);
which is by far not even close.
Is there a way to make this button with gradients in CSS or not?
If theres not what is the proper way to use images as button backgrounds in HTML? Because not all buttons are the same size and an image background might be distorted in places. (Any best practices?)

Answer 1

You could do it like this:
DEMO
body {
margin: 50px;
}
div {
overflow: hidden;
position: relative;
width: 400px;
height: 50px;
background: -webkit-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
background: -moz-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
background: -ms-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
background: -o-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
background: linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
}
div:before, div:after {
content:'';
position: absolute;
bottom: 0;
height: 36px;
width: 36px;
margin-left: -36px;
transform-origin: 100% 100%;
transform: rotate(45deg);
background: #FEC1F4;
}
div:before {
left: 0;
}
div:after {
right: 0;
}
<div></div>
*Side note: You may need to change the colors.

Answer 2

Solution without using CSS 3:
Use background-image in order to recreate the 3D effect inside the button.
Use box-shadow in order to create the shadow effect around the button.
Just a quick example how your code would be:
.btn{
width:100px;
height: 50px;
background-image: url('image.png');
background-color: #cccccc;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
If you need to reuse your button with on different size inside your website, you can slice your PSD button in three parts (look image attached), HTML would be something like this.
<div class="btn">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
You can set the widht of .center as percentage and .left and .right with fixed sizes and background images.