Crea botones geniales usando CSS3 y RGBa

Bueno, al ver este título, primero podemos ignorar los navegadores IE.

Admito que tengo una tendencia minimalista y quiero poder hacer más con la menor cantidad de código e imágenes.

Aunque CSS3 solo agrega algunas características nuevas, estas propiedades pueden hacer muchas cosas útiles y simplificar enormemente nuestro trabajo. Los botones que creamos hoy aprovechan al máximo los efectos de esquinas redondeadas, sombra de cuadro y sombra de texto de CSS3, mientras usan colores RGBa.

Primero echemos un vistazo a la demostración:

Podemos hacer estos bonitos botones en cuatro pasos:

1. Configuración básica de botones.

Primero debemos configurar el estilo básico del botón. Aquí usamos la etiqueta a. Por supuesto, también puede usar etiquetas de entrada, de botón, etc. La etiqueta a se usa aquí porque solo la etiqueta a entre estas tres etiquetas admite. :pseudoclase hover.

Gracias a ytzong Children's Shoes por su sugerencia. Cambiamos a display:inline-block, que puede guardar las líneas de código flotantes y de margen. ——[email protected]

2. Imagen degradada png semitransparente

Esta es la única imagen que utilizamos aquí. Esta imagen png transparente se utiliza para lograr degradados de color. Podemos llamar a esta imagen un degradado de transparencia monocromático. En CSS, puedes lograr diferentes efectos de degradado de color usando una demostración de fondo + una imagen png como esta. Por supuesto, esta no es una característica de CSS3. Excepto los navegadores inferiores a IE6, todos los navegadores pueden lograr este efecto. Puede hacer clic aquí para ver el archivo png.

3. Esquinas redondeadas

Las esquinas redondeadas (border-radius) son una de las mejores funciones de CSS3 admitidas actualmente por los navegadores. Además de los navegadores IE, todos los navegadores de nivel A la admiten. Aunque la mayoría de ellos se implementan a través de atributos privados, al menos está disponible. .

4.Sombras y RGBa

Box-shadow y text-shadow son dos nuevas propiedades importantes agregadas a CSS3. Pueden implementar fácilmente sombras de elementos a nivel de bloque y sombras de texto. Sin embargo, ¿no sería mejor si el color de la sombra fuera semitransparente? De esta manera el elemento se combinaría mejor con el fondo. Vale la pena señalar que FF solo admite el atributo text-shadow hasta la versión 3.5 (actualmente compatible con Firefox 3.5beta4).

 .btn {
 ...
 fondo: #222 url(sprites.png) repetir-x;
 /**Imagen de fondo**/
 -radio-borde-moz: 5px;
 -webkit-border-radio: 5px;
 radio del borde: 5px;
 /**esquinas redondeadas**/
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 /**Sombra de botón**/
 sombra de texto: 0 -1px 1px rgba(0, 0, 0, 0.25);
 /**sombra de texto**/
 }

Bien, ahora nuestro botón está completamente listo. Ha conseguido nuestro objetivo.

Este botón es negro, por lo que los botones de otros colores son más fáciles de implementar:

Tenga en cuenta que estos estilos deben colocarse después de .btn. De esta manera, el color de fondo de estos botones verde, azul, rojo, etc. puede anular el color de fondo de .btn. y luego usar

Finalmente, tengamos compasión del navegador IE. Estos botones mostrarán ángulos rectos, colores degradados, sin sombras y sin colores transparentes en los navegadores IE7 e IE8, pero en IE6 mostrarán un fondo azul claro. no admite transparencia png. Si desea que se vea como un botón en IE6, simplemente use los filtros de IE después de js.