Crie botões legais usando CSS3 e RGBa

Bem, vendo este título, podemos ignorar primeiro os navegadores IE.

Admito que tenho uma tendência minimalista e quero poder fazer mais com o mínimo de código e imagens.

Embora CSS3 adicione apenas alguns novos recursos, essas propriedades podem fazer muitas coisas úteis e simplificar bastante nosso trabalho. Os botões que fizemos hoje aproveitam ao máximo os cantos arredondados, sombra de caixa e efeitos de sombra de texto do CSS3, enquanto usam cores RGBa.

Vamos dar uma olhada na demonstração primeiro:

Podemos fazer esses lindos botões em quatro etapas:

1. Configurações básicas de botões

Precisamos primeiro definir o estilo básico do botão. Aqui usamos a tag a. Claro, você também pode usar tags de entrada, de botão, etc. A tag a é usada aqui porque apenas a tag a entre essas três tags suporta o. :hover pseudo-classe.

Obrigado a ytzong Children's Shoes por sua sugestão. Mudamos para display:inline-block, que pode salvar as linhas flutuantes e de margem do código. ——[email protected]

2. Imagem gradiente png semitransparente

Esta é a única imagem que usamos aqui. Esta imagem PNG transparente é usada para obter gradientes de cores. Podemos chamar essa imagem de gradiente de transparência monocromático. Em CSS, você pode obter diferentes efeitos de gradiente de cores usando uma demonstração de fundo + uma imagem png como esta. Claro, este não é um recurso do CSS3. Exceto para navegadores abaixo do IE6, todos os navegadores podem obter esse efeito. Você pode clicar aqui para visualizar o arquivo png.

3. Cantos arredondados

Cantos arredondados (border-radius) são um dos melhores recursos CSS3 atualmente suportados pelos navegadores. Além dos navegadores IE, todos os navegadores de nível A o suportam, embora a maioria deles seja implementada por meio de atributos privados, pelo menos está disponível. .

4.Sombras e RGBa

Box-shadow e text-shadow são duas novas propriedades importantes adicionadas ao CSS3. Elas podem implementar facilmente sombras de elementos e sombras de texto em nível de bloco. Porém, não seria melhor se a cor da sombra fosse semitransparente. Dessa forma, o elemento combinaria melhor com o fundo. É importante notar que o FF suporta apenas o atributo text-shadow até a versão 3.5 (atualmente compatível com Firefox 3.5beta4).

 .btn {
 ...
 plano de fundo: #222 url(sprites.png) repetir-x;
 /**Imagem de fundo**/
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 raio da borda: 5px;
 /**cantos arredondados**/
 -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 do botão**/
 sombra de texto: 0 -1px 1px rgba (0, 0, 0, 0,25);
 /**sombra do texto**/
 }

Ok, agora nosso botão está completamente pronto. Atingiu nosso objetivo.

Este botão é preto, então botões de outras cores são mais fáceis de implementar:

Observe que esses estilos devem ser colocados após .btn. Dessa forma, a cor de fundo desses botões verde, azul, vermelho, etc. pode substituir a cor de fundo de .btn. e então use

Finalmente, tenhamos pena do navegador IE. Esses botões exibirão ângulos retos, cores gradientes, sem sombras e sem cores transparentes nos navegadores IE7 e IE8, mas no IE6 exibirão um fundo azul claro. não suporta transparência png Se você quiser que se pareça com um botão no IE6, basta usar os filtros do IE após js.