Alguien sabría decirme donde encontrar un tutorial, algún ejemplo o guiarme un poco para conseguir un botón en CSS que reuna icono, texto?
Os dejo una imagen que he construido en photoshop para que os hagais una idea:
Gracias por adelantado.
por ejemplo:
<a href="tal.html" class="botonaco">Aqui el texto molón todo lo largo que quieras etc...</a>
.botonaco{
display: block;
width: 200px;
height: 200px;
padding: 50px;
background: url(../img/escudo.jpg) no-repeat 0 0
}
.botonaco:hover{
background: url(../img/escudo2.jpg) no-repeat 0 0
}
Hola Crawler, gracias por tu idea pero esto es lo que he conseguido:
¿Como puedo hacer para ajustar mas el texto a la derecha y arriba para que no se solape con el icono?
Gracias de nuevo.
PD: ya se notará pero por si acaso soy bastante flojo en CSS xD
bueno, pues se explica con más calma y no hay problema 
El padding es el espacio que quieres dejar desde el borde del elemento hasta su contenido (excluyendo la imagen de fondo).
Lo único raro que tiene, es que se suma al ancho total, es decir si quieres que el botón mida en total 250px y que tenga 20 de padding en cada lado, debes darle un width de 210.
Ejemplos:
width: 250px; padding: 20px; = 250+20+20 = 290; (sumo 2 veces 20 por el padding izquierdo + el derecho)
width: 210px; padding: 20px; = 210+20+20 = 250; (que es lo que queriamos realmente)
En tu imagen, midiendo asi a ojo te diria que seria algo asi:
.botonaco{
display: block;
width: 160px;
padding: 20px 20px 20px 70px;
background: url(../img/escudo.jpg) no-repeat 5px 5px;
}
Por cierto, por si no pillas lo de :
padding: 20px 20px 20px 70px;
es lo mismo que hacer:
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 70px;
pero en versión corta
YA QUE ESTAMOS:
Se puede hacer lo mismo, pero sin usar <a...></a>? que el texto esté incluido en la imagen hecha con fotoshop y simplemente le cambies el background a un DIV??
#5 yo sigo haciendo pruebas pero vamos creo que para el caso que pides sería simplemente:
<div class="botonaco">Aqui el texto molón todo lo largo que quieras etc...</div>
o
<span class="botonaco">Aqui el texto molón todo lo largo que quieras etc...</span>
Saludos
@ #6
correcto, con la única diferencia que en internet explorer el :hover solo es aplicable a los elementos a (links)
@ #5
No deberías poner el texto en la imagen solamente, las imágenes son imágenes y el texto texto (obvio), hay gente que navega sin imágenes y si eso no te convence... los buscadores no leen el texto que está dibujado en una imagen
la verdad ke cada vez ke veo cosas en CSS me gustaria meterle el explorer por el puto culo a bill gates porke es la mayor mierda jamas creada.
como me gusta discutir.. (y no pegar ni chapa en el trabajo posteando en foros 
)
Internet explorer 6, cuando salió fue una revolución, era bastante bueno en cuanto a standares en su momento, tenia algunos juguetitos propios como transiciones y cosas asi, (que todos decimos que son gilipolleces pero luego usamos moz-border-radius y similares)
El problema es que era bueno (o menos malo) en el 2001, pero estamos en el 2009 y la gente sigue usándolo, cuando obviamente, se ha quedado muy desfasado.
Ahora que está otra vez demandada Microsoft por incluir internet explorer en windows, yo pienso..
el problema no es que lleve internet explorer (que para mi es necesario cuando instalo windows para poder entrar en la página de firefox y descargarmelo) el delito real es que no tenga autoupdate! (y hagan updates en condiciones)
No soy de firefox, o de opera, o de X, por ser anti microsoft, si no por que son mejores.
Si explorer 6 hubiese tenido autoupdate y hubiesen ido actualizandose (que no lo hicieron por que como va incluido en windows se llevaba la palma del mercado), la cosa hubiese sido MUY distinta.
estoy de acuerdo contigo, no obstante #9 lo que quería hacer yo de meter texto en una imagen venía por otra razón, porque era para un logo, y quería que el fondo de un div, fuese ese logo, y que cuando pasabas el ratón por encima se aplicase la propiedad :hover que en mi caso era cambiar la imagen por la mísma pero con ajuste de tonos para que parezca más clara.
pues imaginando que es el logo principal de tu página, yo lo haria asi:
<h1>Mi web</h1>
h1{
height: 100px;
width: 100px;
overflow: hidden;
text-indent: -9999px;
background: url(../img/logoPrincipal.jpg) no-repeat 0 0;
}
Lo puedes hacer con un h1,un a, un div, o lo que quieras (en caso de un a,p,span.. etc, debes añadir el nombre de la clase, y un display: block; )
Asi ves el fondo del div con la imagen que quieres, y un buscador ve el texto del div (que tu no ves, por que está fuera del div, con un overflow hidden)
En cuanto al hover, si te da igual que no se vea en explorer, pues no tiene mas misterio:
h1:hover{
lo que quieras
}
Puedes hacer cambiar una imagen por otra, puedes hacer la imagen con los 2 estados del logo y reposicionar el fondo en el hover, puedes cambiar la opacidad del contenedor... etc soluciones tienes varias.
P.D. tambien tienes soluciones en javascript para que explorer si que haga el hover, como whatever:hover y similares. Ahora solo no te funcionará en explorer con javascript desactivado
Crawler no entiendo eso de que el hover no funciona en explorer. Yo acabo de probar mi boton en IE6-7, Firefox, Chrome y Safari y me funciona en todos. :?
solo funciona en elementos a (link), que si has seguido mi recomendación, es como lo has hecho... ¿me equivoco?
#13 el tema es que el hover que es lo que me importa, no funciona en iexplorer y sobretodo que la página web la tengo cargada de funciones de javascript (estoy usando jquery para hacer muchas animaciones) y cuando más funciones le meto, más lento vá, por eso quería intentar evitar si se podía, usar el javascript. no obstante tmpc pasará nada supongo que solo es hacer que el javascript cambie un style... asías de todas formas
Crawler una ultima dudita, como puedo poner un DIV a la derecha o izquierda de otro DIV similar?
pongo captura:
Como ves he creado 3 botones similares uno debajo de otro en la primera fila, pero lo que busco es como podria poner una fila similar en el lado derecho (fila semitransparente).
Gracias de nuevo y saludos.
Tengo ese icono verde por si lo quieres xD
Alomejor te sirva esto, y ya de paso de unes a la comunidad si quieres xD
puedes hacerlo a lo vasco:
<!--Capas no transparentes!!!-->
<div id="opaco1" style="position:absolute; margin-left:0px; margin-top:0px;background-image:url('urldetuimagen');background-repeat:no-repeat;">
<div id="opaco2" style="position:absolute; margin-left:0px; margin-top:100px;background-image:url('urldetuimagen');background-repeat:no-repeat;">
<div id="opaco3" style="position:absolute; margin-left:0px; margin-top:200px;background-image:url('urldetuimagen');background-repeat:no-repeat;">
<!--Capas transparentes!!!-->
<div id="transparente1" style="position:absolute; margin-left:200px; margin-top:0px;background-image:url('urldetuimagen');background-repeat:no-repeat;">
<div id="transparente2" style="position:absolute; margin-left:200px; margin-top:100px;background-image:url('urldetuimagen');background-repeat:no-repeat;">
<div id="transparente3" style="position:absolute; margin-left:200px; margin-top:200px;background-image:url('urldetuimagen');background-repeat:no-repeat;">
<!--Como puedes ver, cuando a un div le aplicas el estilo "position:absolute" es muy fácil ubicarlo donde tu quieres tocando su "margin-left:<número>px" y su "margin-top:<número>px". (van o por pixels o por % los margins). Espero que te sirva de ayuda!
Como puedes ver, cuando a un div le aplicas el estilo "position:absolute" es muy fácil ubicarlo..
Uff, los líos que te pueden dar distintos navegadores cuando empiezas a tocar position pueden volverte loco, aunque resetees css, no soy el único que trata de evitarlos lo máximo posible.
En el ejemplo de las 2 columnas (si realmente son 2, y no 6 botones seguidos que se "parten" en 2 columnas) lo que realmente tienes son 2 listados de enlaces, asi que yo optaría por
<ul>
<li><a href="#" class="botonaco">Enlace 1</a></li>
<li><a href="#" class="botonaco">Enlace 2</a></li>
<li><a href="#" class="botonaco">Enlace 3</a></li>
</ul>
<ul class="transparente">
<li><a href="#" class="botonaco">Enlace 4</a></li>
<li><a href="#" class="botonaco">Enlace 5</a></li>
<li><a href="#" class="botonaco">Enlace 6</a></li>
</ul>
y lo de ponerlo una al lado de la otra es con
ul{float: left;} /* tendras que jugar con los margin y eso para colocarlo justo al sitio */
Ojo que te lo hará con todas las ul que tengas en la página, asi que create una class o algo.
Tambien puedes jugar con el posicionamiento a través del view. Trabajas con tablas, pero no los son.
Es decir, la maquetacion es CSS, pero el modo de visualizacion es por tablas y es cojonudo!
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
Hechale un vistazo locoooooooooooooo!