Hace poco salió en el trabajo la posibilidad/necesidad de realizar el botón de Facebook Connect y como el trabajo se está desarrollando, lo que se puede, en HTML5 y CSS3 pensé que no necesitábamos ninguna imagen para poder realizar el botón ya que las nuevas funcionalidades de CSS3 permiten hacer el botón sin problemas. Al final el botón se realizó con imágenes por motivos legales. A continuación pongo el código CSS y el resultado para que veáis la versión 3 tiene unas nuevas posibilidades muy interesantes.
el resultado final:
Connect
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Botón facebook connect puro CSS3</title>
<style type="text/css">
.facebook_btn{
width:192px;
height:39px;
border:1px solid #375B95;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #425C97;
background: -moz-linear-gradient(#6D82AD,#425C97);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#6D82AD), to(#425C97));
cursor:pointer;
clear:left;
}
.icono, .texto{
border:1px solid #657AAF;
border-top: 1px solid #99A6D0;
height:37px;
}
.icono .f1, .icono .f2, .icono .f3, .icono .f4{
position: absolute;
background-color:#FFFFFF;
}
.icono .f1{
width:10px;
height:4px;
top:4px;
right:5px;
-moz-border-radius-topleft:5px;
border-top-left-radius: 5px;
}
.icono .f2{
width:5px;
height:6px;
top:8px;
right:10px;
}
.icono .f3{
width:14px;
height:5px;
top:14px;
right:5px;
}
.icono .f4{
width:5px;
height:15px;
bottom:3px;
right:10px;
}
.icono{
border-right: 1px solid #375B95;
border-radius: 5px 0 0 5px;
width:40px;
float:left;
position:relative;
}
.texto{
border-radius: 0 5px 5px 0;
width:148px;
float:left;
font: bold 20px Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 1px #3A538C;
text-align:center;
color:#FFFFFF;
letter-spacing: 1px;
line-height: 37px;
}
</style>
</head>
<body>
<div class="facebook_btn">
<div class="icono">
<div class="f1"></div>
<div class="f2"></div>
<div class="f3"></div>
<div class="f4"></div>
</div>
<div class="texto">
Connect
</div>
</div>
</body>
</html>
Como veis el resultado es un botón sin imágenes. También el icono de facebook está echo en CSS puro sin una sola imagen. Obviamente se necesita un navegador moderno con soporte CSS3 como Mozilla Firefox o Chrome.