Separar imagem botao ( como no exemplo )

Paulo1471 · July 16, 2012 at 03:26 PM

Boas !!

Tenho isto : https://dl.dropbox.com/u/33652950/d2.PNG

Mas queria algo como : https://dl.dropbox.com/u/33652950/d1.PNG

Ou seja , queria separar a imagem !! Ja pensei em fazer dois botoes, um com imagem, outro com texto, mas nao me parece que seja uma boa soluçao ( o border parece o mesmo neste exemplo, nao parece tar algum a sobrepor-se a outro ) . !!

Sugestões !!

Obrigado !!

pmg · July 16, 2012 at 03:32 PM

Podes meter um elemento <a> contendo a imagem e o texto.

Se necessario metes o <a> dentro do <div>

<div class="two_part_button">
   <a href="whatever"><img src="whatever">Download</a>
</div>

Depois é uma questão de formatares a <div>, o <a> e a <img> de acordo com os teus requerimentos.

HappyHippyHippo · July 16, 2012 at 03:36 PM

Ou seja , queria separar a imagem !!

separar porque ? eu vejo um e só um botão ...

Rui Carlos · July 16, 2012 at 04:28 PM

Podes definir uma background-image (CSS) para esses links/botões.

(E também podias ver como é que isso está implementado nesse exemplo que deste.)

Paulo1471 · July 16, 2012 at 04:32 PM

Podes meter um elemento <a> contendo a imagem e o texto.

Se necessario metes o <a> dentro do <div>
<div class="two_part_button">
<a href="whatever"><img src="whatever">Download</a>
</div>
Depois é uma questão de formatares a <div>, o <a> e a <img> de acordo com os teus requerimentos.

Vou tentar assim !! Com formatações !!

Obrigado !!

Podes definir uma background-image (CSS) para esses links/botões.

(E também podias ver como é que isso está implementado nesse exemplo que deste.)

Isto é uma imagem, não está implementado na pagina !!

separar porque ? eu vejo um e só um botão ...

Separar no sentido de dividir !! Por uma divisória !! A resposta do pmg pode ser que resulte !!

Paulo1471 · July 16, 2012 at 10:19 PM

Tentei fazer com duas div's !! A mais pequena dentro da outra maior !!

Obti isto: https://dl.dropbox.com/u/33652950/d3.PNG

Com este código:

<div class="two_part_button">
	 <div class="two_part_button2"><img src="download.png"></div>
</div>

.two_part_button {
border-radius:5px;
width:200px;
height:45px;
border: 1px solid #008000;
background: #32CD32;
}
.two_part_button2 {
padding:1px;
width:50px;
height:43px;
border: 1px solid #1E90FF;
background: #00BFFF;

É mais ou menos isto !! Alguma ideia para a formatação ficar melhor ?? Ou algum link com algo parecido !!

Obrigado.

HappyHippyHippo · July 17, 2012 at 06:00 AM

Que complicação !! fiz isto com a imagem que apresentaste no primeiro post (a verde)

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.download {
			background: url(d1.png) no-repeat;
			width: 220px;
			height: 69px;
			padding: 25px 0 0 70px;
		}
		.download a {
			font-size: 18px;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div class="download">
		<a>Download Now!</a>
	</div>
</body>
</html>

Paulo1471 · July 17, 2012 at 05:44 PM

Com a imagem era fácil, bastava fazer quase :

<a href=""><img src="d1.png"></a>

Mas eu queria ter algo em css que me permitesse construir algo deste tipo, com imagem e texto 'separados' !! Porque ito é só uma imagem de exemplo !!

Vou tentar melhorar aquele que apresentei mal 'desenhado' .

Obrigado .

HappyHippyHippo · July 17, 2012 at 05:49 PM

Mas eu queria ter algo em css que me permitesse construir algo deste tipo, com imagem e texto 'separados' !!

eu tenho a imagem e texto separado

Paulo1471 · July 17, 2012 at 06:05 PM

Mas o texto nao coincide com o da imagem !!

E eu só tenho esta imagem !! É so um exemplo, que gostava de reproduzir !!

Sem usar imagens, que assim podiam fazer efeitos hover e assim , na mesma sem imagens .

HappyHippyHippo · July 17, 2012 at 06:21 PM

podes fazer os mesmo efeitos "hover" com imagens ... ou por troca de imagens ou por "background clipping"

Paulo1471 · July 17, 2012 at 06:31 PM

Vou tentar com CSS, senao photoshop para fazer imagens xd

Obrigado !!

HappyHippyHippo · July 17, 2012 at 06:37 PM

já que queres ir pelo caminho mais difícil, visto que os meus concelhos é a mesma coisa que chover no molhado, depois de conseguires alguma coisa parecida com o que pretendes, verifica o teu resultado nos browsers ainda em uso

- IE 7

- IE 8

- IE 9

- Firefox

- Opera

- Safari

- Chrome

isto para não falar nos mobile

Rui Carlos · July 17, 2012 at 07:10 PM

Vou tentar com CSS, senao photoshop para fazer imagens xd

Qual é o problema da solução apresentada pelo HappyHippyHippo?

Ele apresentou uma solução que separa a imagem do texto, que não coloca o texto na imagem, que não coloca a imagem no HTML, que te permite facilmente alterar o formato do botão (alterando a imagem no CSS), que funciona decentemente num browser em modo texto, etc.

Confesso que não estou mesmo a ver o que é que queres mais...

Pessoalmente, apenas tentaria remover a necessidade da div à volta do link, mesmo que para isso tivesse que deixar de usar várias cores para o fundo (imagem/texto) e gradientes.

Paulo1471 · July 17, 2012 at 08:20 PM

já que queres ir pelo caminho mais difícil, visto que os meus concelhos é a mesma coisa que chover no molhado, depois de conseguires alguma coisa parecida com o que pretendes, verifica o teu resultado nos browsers ainda em uso

- IE 7

- IE 8

- IE 9

- Firefox

- Opera

- Safari

- Chrome

isto para não falar nos mobile

Nenhum conselho foi chover no molhado !!

Só disse que não queria usar o botão 'ja feito' como fundo; usar imagem como fundo ja uso, aqui por exemplo :

Tenho é que conseguir separar isto !

Qual é o problema da solução apresentada pelo HappyHippyHippo?

Ele apresentou uma solução que separa a imagem do texto, que não coloca o texto na imagem, que não coloca a imagem no HTML, que te permite facilmente alterar o formato do botão (alterando a imagem no CSS), que funciona decentemente num browser em modo texto, etc.

Confesso que não estou mesmo a ver o que é que queres mais...

Pessoalmente, apenas tentaria remover a necessidade da div à volta do link, mesmo que para isso tivesse que deixar de usar várias cores para o fundo (imagem/texto) e gradientes.

A solução não tem problema !! Foi um mal-entendido, veja o comentário de cima !

HappyHippyHippo · July 17, 2012 at 08:31 PM

então eu pergunto .. porque é que necessitas de criar o botão 100% em css ??

para que tanto trabalho para criar algum que será quase inevitavelmente incompatível com algum browser ?

Paulo1471 · July 17, 2012 at 09:25 PM

Bem, por acaso com tantas tentativas fartei.me um bocado !!

Secalhar é melhor fazer a imagem toda em photoshop ( com ou sem o texto ) , pois a imagem pode ser posta como link ou como fundo !

É melhor !!

Obrigado, e peço por alguma coisa !!

Já agora: Como fui a unica pessoa a responder a este tópico : http://www.portugal-a-programar.pt/topic/55249-ciclo-para-mostrar-divs/

Coloquei uma nova duvida, será que pode 'botar o olho' xd

Sign In

Separar imagem botao ( como no exemplo )

Recommended Posts

Paulo1471

pmg

HappyHippyHippo

Rui Carlos

Paulo1471

Paulo1471

HappyHippyHippo

Paulo1471

HappyHippyHippo

Paulo1471

HappyHippyHippo

Paulo1471

HappyHippyHippo

Rui Carlos

Paulo1471

HappyHippyHippo

Paulo1471

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information