Ok, this post is going to be on english.

- I saw this randomly .psd, and decided to convert it to css3 without using a single image.

- Mainly to try it out, practice and experiment.

Let’s start:

HTML

<div class="container">

     <div class="box">

          <a class="button" title="" href="#">Submit</a></div>

     </div><!-- End of Box -->

</div><!-- End of Container -->

CSS

/*
 Author: Ivo Culic - ifkas
 Author URI: http://www.tajfa.com
 Item URI: http://www.tajfa.com/primeri/css3lightskybluebutton
 Item Name: Lightsky Blue CSS3 Buttons
 Purpose: Practice to style with CSS3
 Version: 1.0
*/

/*
 TOC
  00 - Resets
  01 - General
  02 - Button
    01- main
    02- text shadows
    03- gradients
    04- borders
    05- box shadows
    06- hover
    07- focus,active
*/

/*
   ===============================
   ========== RESETS =============
   ===============================
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    text-decoration:none;
}

.clear	{clear:both;}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*
   ===============================
   ========== GENERAL ============
   ===============================
*/

body {
    background: url(../img/bg.jpg) repeat #fcfcfc;
}

.container {
    width: 600px;
    margin: 50px auto;
}

.box {
    /* Left as option */
}

/*
   ===============================
   ========== BUTTON =============
   ===============================
*/

a.button {
    padding: 15px 100px 20px 30px;
    position: relative;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    background-color: #2fa2ee;
    letter-spacing: -1px;

    /* Text Color and Shadow */
    color: #107fc9;
    text-shadow: 1px 1px 5px #ffffff, 2px 1px 5px #ffffff;

    /* Gradients */
    background-image: linear-gradient(bottom, #8DCCF6 10%, #CCE8FB 78%, #DEF0FC 93%);
    background-image: -o-linear-gradient(bottom, #8DCCF6 10%, #CCE8FB 78%, #DEF0FC 93%);
    background-image: -moz-linear-gradient(bottom, #8DCCF6 10%, #CCE8FB 78%, #DEF0FC 93%);
    background-image: -webkit-linear-gradient(bottom, #8DCCF6 10%, #CCE8FB 78%, #DEF0FC 93%);
    background-image: -ms-linear-gradient(bottom, #8DCCF6 10%, #CCE8FB 78%, #DEF0FC 93%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.1, #8DCCF6), color-stop(0.78, #CCE8FB), color-stop(0.93, #DEF0FC));

    /* Border */
    border: 2px solid #acdaf8;
    border-bottom: 1px solid #0c588b;
    border-left: 1px solid #74acd2;
    border-right: 1px solid #74acd2;
    border-radius: 13px;

    /* Box Shadows */
    box-shadow: 0 8px #e3e3e3, inset 0 -1px #0c588b, inset 0 -8px #2fa2ee, inset 0 -10px #c9e7fa, inset 0 1px #f2f7fa;

    /* Fixing the bleed edges of corners  */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

/* ON HOVER */
a.button:hover {
    background-image: linear-gradient(bottom, #ACDAF8 2%, #EBF6FD 64%);
    background-image: -o-linear-gradient(bottom, #ACDAF8 2%, #EBF6FD 64%);
    background-image: -moz-linear-gradient(bottom, #ACDAF8 2%, #EBF6FD 64%);
    background-image: -webkit-linear-gradient(bottom, #ACDAF8 2%, #EBF6FD 64%);
    background-image: -ms-linear-gradient(bottom, #ACDAF8 2%, #EBF6FD 64%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.02, #ACDAF8), color-stop(0.64, #EBF6FD));
}

/* ON ACTIVE */
/* Strange behaviour with focus on chrome browser, if we use tab somehow works */
a.button:active, a.button:focus {

    padding: 15px 100px 15px 30px;
    top: 2px;

    background-image: linear-gradient(bottom, #107FC9 37%, #0B578A 89%);
    background-image: -o-linear-gradient(bottom, #107FC9 37%, #0B578A 89%);
    background-image: -moz-linear-gradient(bottom, #107FC9 37%, #0B578A 89%);
    background-image: -webkit-linear-gradient(bottom, #107FC9 37%, #0B578A 89%);
    background-image: -ms-linear-gradient(bottom, #107FC9 37%, #0B578A 89%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.37, #107FC9), color-stop(0.89, #0B578A));

    box-shadow: 0 3px #e3e3e3, inset 0 -1px #45a0dc, inset 0 1px #2384c5, inset -1px 0 #4dafef, inset 1px 0 #4dafef; /* Adding multiple 5 shadows, 1 outer and 4 inner */

    color: #0b578a;
    text-shadow: 0 1px 0 #57a9df, 0 1px 0 #57a9df;

    border: 1px solid #135b8c;

}

/* EOF */

TO DO:
- separate the gradients and colors so in future can have different colors (for example button green etc.)
- apply css3 pie so can be rendered in all previous IE browsers.