SummArg | Cursos y recursos para webmasters

03/09/2010

BonBon, hermosos botones sólo con CSS3

Con una ingeniosa combinación de colores, degradados y sombras, nacen los botones “BonBon” enteramente diseñados con CSS3 y algunas nuevas etiquetas de HTML5. En CSS3 Watch alertan que estos botones no están listos para ser utilizados en sitios, pero ciertamente son impresionantes para poder analizar como se logra cada efecto.

El html de los botones de nuestra imagen es muy sencillo:

<a href="#" class="button">Button</a>
<a href="#" data-icon="♚" class="button orange shield glossy">King</a>
<a href="#" data-icon="♞" class="button blue skew">Horse</a>
<a href="#" data-icon="❀" class="button green icon">Flower</a>

Como verán se utiliza la etiqueta data-icon para utilizar símbolos unicode y agregar un pequeño gráfico a nuestros botones. Con la etiqueta class combinamos los estilos a aplicar a nuestros botones, siendo los siguientes los valores disponibles:

  • Color: orange, pink, blue, green, transparent
  • Font: serif
  • Material: glossy, glass
  • Size: xs, xl
  • Shape: round, oval, brackets, skew, back, knife, shield, drop, morph
  • Icon only: icon
  • Disabled: disabled

Las propiedades, por el momento, modifican colores, forma, tamaño y efecto. Se deben combinar exclusivamente los enumerados en la lista. (El archivo buttons.css tiene un poco mas de 400 líneas y en el mismo directorio debe estar el archivo noise.png que acompaña el zip. Todo ello se puede descargar de este link.

Interesantes, verdad?

Dejar un comentario