Botones con Diseño en CSS

Estos son unos botones que manejan un diseño diferente utilizando código Hexadecimal para poder sacar la imagen en el botón y mostrarlo de forma diferente, de esa manera no hay problema con los derechos de autor ya que es código perteneciente a windows fácil de aprender.

Código HTML

Código CSS Botón con Imagen

 

.buttons {
            margin: 0.5em;
            text-decoration: none;
            font: bold 1em/2.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
            display: inline-block;
     white-space: nowrap;
            text-align: center;
            color: #fff;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#81a8cb', EndColorStr='#4477a1');
            border: 1px solid #9c9c9c; /* Fallback style */
            border: 1px solid rgba(0, 0, 0, 0.3);              
            text-shadow: 0 1px 0 rgba(0,0,0,0.4);    
            box-shadow: 0 0 .05em rgba(0,0,0,0.4);
          -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
          -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
   -moz-border-radius: .3em;
           border-radius: .3em;
    border-top: 1px solid #fff; /* Fallback style */
           border-top: 1px solid rgba(255, 255, 255, 0.5);
           display: block;
           padding: 0 1.8em;
    
    /* The background pattern */
    
           background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
           -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
          -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
          -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
           background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
          -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
          -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
          -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

    /* Pattern settings */
    
           -moz-background-size: 3px 3px;
           -webkit-background-size: 3px 3px;
           background-size: 3px 3px;        
}

.buttons:hover{
 box-shadow: 0 0 .1em rgba(0,0,0,0.4);
       -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
       -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);  
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#81a8cb', EndColorStr='#4477a1');
}

.buttons:active{
 /* When pressed, move it down 1px */
        position: relative;
        top: 1px;
}

.button-blue{
       background: #4477a1;
       background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
       background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
       filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
}

.button-blue:hover{
       background: #81a8cb;
       background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
       background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
       filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');            
}

.button-blue:active{
       background: #4477a1;
}
.buttons:focus{
 outline: 0;
 background: #4477A1;
}    

.buttons:before{
   background: #4477A1;
   background: rgba(0,0,0,.1);
   float: left;        
   width: 1em;
   text-align: center;
   font-size: 1.5em;
   margin: 0 1em 0 -1em;
   padding: 0 .2em;
   -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
   -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
   box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
   -moz-border-radius: .15em 0 0 .15em;
   -webkit-border-radius: .15em 0 0 .15em;
   border-radius: .15em 0 0 .15em;
          pointer-events: none;        
}

/* Hexadecimal entities for the icons - imagenes para los botones */

.add:before{
 content: "\271A";
}

.edit:before{
 content: "\270E";        
}

.delete:before{
 content: "\2718";        
}

.save:before{
 content: "\2714";        
}

.email:before{
 content: "\2709";        
}

.search:before{
 content: "\398";
}

Diseño Final




Ref: Alguna información se tomo de las siguientes fuentes: http://red-team-design.com/ , http://www.danshort.com/HTMLentities/index.php?w=zodia