Computêro

Boa noite computêros,

Como todo nerd, após um dia cansativo de trabalho poderia estar jogando meu videogame, mas não, estava estudando como criar um botão com aqueles efeitos gradientes…

Sempre gostei bastante de trabalhar com CSS, mas design não é meu forte. Assim tive que pedir ajuda pro meu irmão de como fazer aqueles efeitos bacanas.

• Criando o modelo do botão com seu editor de imagens:

Nesse caso vou utilizar o fireworks que ajuda bastante além de ser bem simples.

=)

Criando um novo arquivo, nesse caso utilizarei 400px por 400px sendo o fundo transparente.

Clique no botão correspondente ao retângulo com cantos arredondados (Rounded Rectangle)

Crie um retângulo do tamanho que desejar e atribua uma cor de fundo a sua escolha.

No retângulo criado vamos clicar nas propriedades do objeto onde está escrito “Solid”, ao lado da palheta de cores, e escolher o efeito “Gradient/Linear”

Ele terá mais ou menos a seguinte “cara”.

Agora vamos definir qual efeito gradiente iremos querer, para isso iremos alterar as cores do gradiente. Para alterar as cores do gradiente

Depois de definir as cores para o seu botão vamos duplicá-lo. Para fazer o efeito de hover no CSS.

Para duplicar seu botão, pode utilizar o Ctrl C + Ctrl V ou clique no seu retângulo com o botão direito do mouse, menu Edit, opção Duplicate.

Obs: Deixe os botões alinhados um embaixo do outro, sem nenhum pixel abaixo deles, para facilitar o nosso css posteriormente.

Com o botão duplicado iremos trocar as cores do gradiente para diferenciá-lo.

Eu resolvi simplesmente alterar a ordem do gradiente, dando o efeito contrário.

Com os botões prontos agora iremos fazer o recorte deles com a ferramenta Slice Tool na palheta de Web.

Selecione a área que deseja para fazer o recorte como no modelo abaixo, muito cuidado para não tirar o efeito da borda!

Faça a mesma coisa do lado esquerdo. (lembre-se, os dois lados devem ter o mesmo tamanho do recorte)

Depois recorte apenas 1 pixel de largura para fazermos o fundo do botão

Com tudo recortado iremos dar nome a cada slice. Para isso selecione o ponteiro preto, clique na slice e atribua o nome desejado no campo slice.

Faça isso para todas as slices, caso tenha algum problema para selecionar as slices, utilize a guia de layers ao lado direito.

Depois de deixar todos os nomes iremos exportar o nosso recorte, para isso acesse o menu File/Export

Obs: Recomendo que crie uma pasta, pois ele criará varios arquivos.

Opções para ajustar

Export: Images only

Slices: Export Slices

O fireworks irá exportar bastante lixo, deixe somente os 3 que iremos utilizar.

Agora que temos nossas slices podemos fazer o CSS (ALELUIA!)

• Criando o seu botão com o CSS

Vamos criar uma nova página em HTML e começar a estilizar…

Agora iremos criar o CSS para criar nosso botão

Vamos em partes.

Antes de mais nada iremos criar um span com a classe botao para guardar o nosso botão efetivamente.

O CSS do nosso botão terá o cursor:pointer para aparecer a mãozinha que informa links.

1
2
3

span.botao {
	cursor:pointer
}

Agora vamos adicionar o span com a classe botao_centro dentro do span com a classe botão, este span é que terá o texto do nosso botão.

1

<span class="botao"><span class="botao_centro">Teste de Botão</span></span>

Sua estilização será um pouco diferente, de acordo com o tamanho do seu botão e as configurações de fonte e cores.

1
2
3
4
5
6
7
8
9
10
11
12

span.botao_centro {
	background:url(images/fundo_botao.png) repeat-x top left;
	position:relative;
	float:left;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size:14px;
	line-height:35px;
	height:35px;
	color:#FFF;
	text-align:center;
	padding:0px 5px
}

background: informe o caminho para ele encontrar a imagem do fundo do botão (aquela de 1px de largura). top e left informa o alinhamento do CSS, top é porque estamos utilizando a imagem de cima do botão, aquela fizemos primeiramente.

position e float: indica como os elementos se comportaram quando inseridos na página. Procure não alterar essa linha
=)

height: informe o tamanho de largura que o seu botão tem, lembre-se que salvamos o botão com o dobro de altura, portanto, se o seu arquivo tem 70 pixels de largura, seu botão terá 35 de largura.

line-height: indica o tamanho da linha, utilize o mesmo tamanho do seu height, assim seu texto ficará centralizado verticalmente.

o restante é configuração de fontes e cores.

Agora vamos adicionar as bordas da direita e da esquerda, uma em cada lado do span com a classe centro, o span com a classe botao_esq à esquerda e o span com a classe botao_dir à direita.

1

<span class="botao"><span class="botao_centro">Teste de Botão</span></span>

Sua estilização CSS é parecida com a do centro, mudando apenas o background (é claro!) e o width que você deverá informar a largura da sua borda.

1
2
3
4
5
6
7
8
9
10

span.botao_esq, span.botao_dir {
	background:url(images/fundo_botao_esq.png) no-repeat;
	width:9px;
	height:35px;
	position:relative;
	float:left
}
span.botao_dir {
	background:url(images/fundo_botao_dir.png)
}

Agora a parte mais legal, para darmos o efeito de quando o usuário passar o mouse em cima do nosso botão é muito simples, basta colocar o seguinte css:

1
2
3

span.botao:hover span {
	background-position:bottom left;
}

É isso aí computêros, um código simples que dá uma boa diferença…

O exemplo funcionando pode ser visto aqui:

Download do png dos botões:

Popularity: 67% [?]