(Resolvido)Botão para Whatsapp

[Pifafa 36]

.Qual servidor ou website você utiliza como base? 

Geisor

Qual o motivo deste tópico? 

Gostaria de fazer botão bonito de Geisor.

 

Estou postando a baixo a foto de como é botão que alguns site usam, acho muito bonito!

 

dai coloca o mouse encima ele da um efeito! kkk

 

 

[braisvilela 2]

Só colocar efeito onHover na imagem com css.
Tem vários modelos prontos na net...

Usa a imagem dentro de uma <div> e dps coloca no css o efeito da mesma id.
https://www.w3schools.com/howto/howto_css_image_overlay.asp

Editado Outubro 24, 2019 por braisvilela (veja o histórico de edições)

[Pifafa 36]

9 horas atrás, braisvilela disse:

Só colocar efeito onHover na imagem com css.
Tem vários modelos prontos na net...

Usa a imagem dentro de uma <div> e dps coloca no css o efeito da mesma id.
https://www.w3schools.com/howto/howto_css_image_overlay.asp

 

Não me ajudo muito, não sou tão bom em programação do site.

[braisvilela 2]

4 horas atrás, Pifafa disse:

Não me ajudo muito, não sou tão bom em programação do site.

 

Voce quer tudo pronto é? Pq não ve tutoriais? Voce tem que aprender pra não depender dos outros...
cria um arquivo .css e coloca o efeito hover e depois coloca o css dentro da tag <header> e só colocar a imagem linkada ou div.

Se voce quer o serviço dos outros voce tem que dar algo em troca.

[Pifafa 36]

48 minutos atrás, braisvilela disse:

Voce quer tudo pronto é? Pq não ve tutoriais? Voce tem que aprender pra não depender dos outros...
cria um arquivo .css e coloca o efeito hover e depois coloca o css dentro da tag <header> e só colocar a imagem linkada ou div.

Se voce quer o serviço dos outros voce tem que dar algo em troca.

 

Não gostei do seu comentário, não estou pedindo e muito menos mandando estou apenas procurando alguém que tenha um código já para posta. Achei totalmente desnecessário seu comentário e infeliz, eu ao longo dos meus 8 anos de fórum nunca mandei ou argumentei dessa forma rude com alguém, sempre procurei ajuda e auxiliar o pessoal na minha pequena capacidade para tais coisa, visto que sou bem leigo com os ot's.

[LeoTK 795]

@braisvilela opa tudo bom realmente você disse coisas desnecessárias.

aqui é um fórum gratuito com o devido lugar para jobs.

caso você não tem paciência ou tempo para ajudar o membro que obviamente é leigo no assunto não precisa ser rude você deu um bom ponto de partida para ele tenho certeza que outro membro poderia complementar o seu comentário com a conclusão que ele esta procurando sem precisar ser arrogante.

deixo observado caso não quiser concluir seus comentários porque acha que o membro é leigo "demais" assim dizendo então basta não comentar mais nada para evitar poluição discussão etc... grato

[ITALOx 183]

1 hora atrás, braisvilela disse:

Voce quer tudo pronto é? Pq não ve tutoriais? Voce tem que aprender pra não depender dos outros...
cria um arquivo .css e coloca o efeito hover e depois coloca o css dentro da tag <header> e só colocar a imagem linkada ou div.

Se voce quer o serviço dos outros voce tem que dar algo em troca.

 

 

O cara tá perguntando quem tem. se você não tem, não precisa falar esses tipos de comentários desnecessário... espero que melhore agora!

[Pedro. 535]

CSS

 

.zaptable {
	position: absolute;
	margin-left: 60%;
	text-align: left;
	background: #01010185;
	border: 2px solid #8595bb;
	padding: 9px 8px 6px 47px;
	border-radius: 0 0 10px 10px;
	color: #fff;
	margin-top: -2px;
	font: 400 9pt Verdana, Arial, Times New Roman, sans-serif;
	box-shadow: 6px 6px 50px 2px #23d100;
	z-index: 10000;
	transition: all 600ms ease-out
}

.zaptable:hover {
	box-shadow: 2px 2px 18px 1px #03ff0d;
	border: 2px solid #03ff0d;
	background: #343f58;
	transition: all 500ms ease-out;
	z-index: 10000;
	cursor: pointer
}

.zaptable img {
	position: absolute;
	margin-left: -47px;
	margin-top: -8px;
	width: 43px
}

.zaptable small {
	transition: all 500ms ease-out;
	display: none
}

.zaptable:hover small {
	transition: all 500ms ease-out;
	display: block
}

 

DIV

 

<a href="https://chat.whatsapp.com/FFd7zZAdq5KHt7x6qd4Dr9" target="_blank">
		<div class="zaptable">
			<div class="zapbox">
				<img src="./layouts/tibiacom/images/themeboxes/whats.png"><strong>Whatsapp Group: </strong>Nome do Servidor<br>
				<strong>Limit of members </strong> 200 <small style="color: #00c51d;text-shadow: 1px 1px black;text-align:center;">Click here to enter!</small>
			</div>
		</div>
	</a>

 

 

 

[luanluciano93 1994]

6 horas atrás, braisvilela disse:

Voce quer tudo pronto é? Pq não ve tutoriais? Voce tem que aprender pra não depender dos outros...
cria um arquivo .css e coloca o efeito hover e depois coloca o css dentro da tag <header> e só colocar a imagem linkada ou div.

Se voce quer o serviço dos outros voce tem que dar algo em troca.

 

Fez o cursinho gratuito de 10 min de HTML e já quer vir aqui tirar dinheiro dos leigos. Chegou a chamar um membro de burro em outro tópico só porque ele escreveu uma palavra em inglês errada. Você deve estar no lugar errado, aqui é um fórum onde o pessoal se ajuda e ninguém ganha nada em troca, então se não quer ajudar não atrapalhe. Já que você é tão gênio, produza conteúdo e poste.

[LeoTK 795]

@luanluciano93 obrigado, o membro já foi punido severamente irei desabilitar respostas neste tópico para não poluir