Supongo que te sonarán estos botones
En este caso son de Google Calendar pero pueden verse muchos por la red. La mayoría de ellos están creados con imágenes pero existe un método sencillo de crearlos con CSS.
.feed {
margin:4px;
border:1px solid;
border-color:#F4A460 #000000 #000000 #FF6600;
padding:0 3px;
background:#FF6600;
font:bold 10px verdana,sans-serif;
color:#FFFFFF;
text-decoration:none;
}En el documento utilizaríamos algo así:
<a href="/xml/" class="feed">XML</a>
Que se vería:
Un par de cambios y ¡voilá!
Si, además queremos darle un efecto “hover” podríamos usar algo así:
a.feed:link, a.feed:active {
margin: 2px;
border: 1px solid;
border-color: #F4A460 #000000 #000000 #FF6600;
padding: 0px 3px 0px 3px;
background: #FF6600;
font: bold 10px verdana, sans-serif;
color: #FFFFFF;
text-decoration: none;
}
a.feed:hover, a.feed:active{
margin: 2px;
border: 1px solid;
border-color: #F4A460 #000000 #000000 #FF6600;
padding: 0px 3px 0px 3px;
background: #FF6600;
font: bold 10px verdana, sans-serif;
color: #FFFF00;
text-decoration: none;
}Entre las ventajas de este método destacan sin duda:
Y como ya os habréis dado cuenta, de esta misma forma con un poco más de trabajo podremos obtener resultados excelentes, como ejemplo estos tres enlaces, en inglés:
Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades
[...] Usar CSS en vez de imágenes para hacer botones: [ws] Inline Buttons (2.0) The CSS XML / RSS Button 3-d push button effect Webmaster: CSS Button Webmaster Libre » Botones simples con CSS [...]
Feed RSS de los comentarios de este post.
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
El principal motivo por el que no recomiendo utilizar Smarty es porque el propio PHP tiene una sintaxis embebida, lo que permite utilizarlo sin más para escribir plantillas web.
Guerra Creativa es una comunidad para Creativos. Nosotros te proporcionamos el campo de batalla y el armamento para conquistar el mundo creativo. A través de concursos de diseño web y de logos, l…
Con este Ebook puedes tener un sitio web con hospedaje y domino gratis, ademas de un CMS gratis, no debes registrarte en nada, lo unico que debes hacer es luego de leerlo compartirlo, regalarlo, si…
Lista de 32 sitios para descargar imagenes gratis, es una recopilacion de no uno ni dos sino 32 Bancos de Imagenes
Post para aprender a descargar las conocidas librerías de Evermotion para diseñadores que trabajan con 3Ds Max.
¿Qué medidas de seguridad se tienen en cuenta en el momento de implementar una subida de archivos en PHP?
¡Hola!
El componente Auth del framework CakePHP guarda las páginas en la memoria cache de IE7 (o eso es lo que creo haber entendido).
Para que no lo haga, he añadido los campos Ca…
Theresa Neil realizó un extraordinario análisis de 12 diseños estándar de interfases web como parte de su libro Diseñando Interfases Web: Principios y pautas para la interacción
50 herramientas extremadamente útiles para PHP
Tendencias de diseño de botones de ”llamada a la acción”
Ver más noticias de los usuarios
Interesante aporte aunque me gustaría que me amplien mayor información sobre los diferentes botones que se pueden hacer con CSS
Gracias por el tutorial, lo pusimos en práctica y salio a la perfección.