Blog

CSSS – Ícones em botões, links de forma prática usando :before

Postado em por & marcado em dicas.

Todos sabem da dificuldade de inserir ícones num botão, alguns inserem a tag img, cercam ela de propriedades float para não quebrar o layout, deixando nada semântico e prático o seu código. Nesse caso usei um dos pseudos elementos, o before para inserir o ícone do Twitter.

O HTML:

[cc lang=”html”]@andrewsfg[/cc]

O CSS:

[cc lang=”css”]
a {
background-color: #f4f4f4;
color: #444;
display: block;
font: .85em/1.0 Helvetica, Arial, sans-serif;
border-radius: 5px;
padding: 8px 2.5%;
text-decoration: none;
width: 40%;
border-radius: 5px;
box-shadow: inset 1px 1px 1px #ccc;
transition: all .3s ease-in;
-webkit-transition: all .2s ease;
-moz-transition: all .3s ease;
}
a:hover {
background-color: #333;
color: #fff;
box-shadow: inset 1px 1px 5px 2px #666;
}
a:before {
content:url(‘http://cdn1.iconfinder.com/data/icons/socialmediamini/PNG/twitter.png’);
display: block;
float: left;
margin-right: 8px;
}
[/cc]
Exemplo: http://jsfiddle.net/andrewsfg/QyBpZ/1/

Compatibilidade: Chrome, Safari, Opera, Firefox, Internet Explorer (8,9). Infelizmente a versão 7 do IE não dá suporte aos pseudos elementos, e eu sei como isso é broxante meu caro.

Tags: , , ,