botões no banner

Detalhes da questão

Endereço do fórum: http://familiawarning.forumeiros.com
Versão do fórum: PunBB

Descrição

Gostaria saber como colocar esse "widget/botão" no banner do meu fórum http://prntscr.com/jt1yup

Fórum em que vi: http://ultimatelife.forumeiros.com/forum

agradeço desde já!

Olá @Jhool,

Onde deseja colocar o botão, em seu fórum?
Forneça por favor os IP's para poder lhe passar o código já feito.

Até mais.

Mais ou menos aqui http://prntscr.com/jt242w

Servidor: 149.56.41.55:7777
TS: 198.50.243.44:7033

Olá @Jhool,

Adicione este JavaScript com investimento em todas as páginas:

Código:

$(function() {
$('#pun-logo').append('<div style="float:right"><div class="pun-server" style="float: right;margin-top: 120px;"><span class="button-server"><a href="samp://149.56.41.55:7777"><i class="fa fa-play-circle fa-3"></i> Conectar-se ao Servidor</a> </span></div><div class="pun-ts" style="margin-top: 175px;"><span class="button-ts"><a href="ts3server://198.50.243.44:7033"><i class="fa fa-volume-control-phone fa-4"></i> Conectar-se ao TeamSpeak³</a> </span></div><div class="pun-info" style="/* float: right; */margin-top: 14px;"><span class="info-server" style="font-size: 11px;color: #1f2b3b;text-shadow: 0px 1px 2px #0000009c;">SA:MP Versão 0.3.7-R2</span></div></div>');
});

Adicione ainda este CSS à sua folha de estilos:

Código:

.pun-ts {
    transition: 0.6s;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33);
    text-align: center;
    color: #fff;
    font-size: 13px;
    padding: 12px;
    background: rgba(152, 152, 152, 0.45);
    border-radius: 5px;
}

.pun-server {
    transition: 0.6s;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33);
    text-align: center;
    color: #fff;
    font-size: 13px;
    padding: 12px;
    background: rgba(3, 169, 244, 0.35);
    border-radius: 5px;
}

Até.

Depois que ativamos o código, o banner ficou jogado para a esquerda http://prntscr.com/jt2nf4
Consegue deixar ele bonitinho dessa forma: https://prnt.sc/jt1yup

Vá no fórum que citei e coloca o mouse encima, tem todo essa "graça"

Acha que consegue fazer algo semelhante?

Depois que ativamos o código, o banner ficou jogado para a esquerda

Ok. Troque o JavaScript que eu passei por este:

Código:

$(function() {
$('#pun-logo').append('<div style="position: absolute;top: 0;right: 5px;"><div class="pun-server" style="float: right;margin-top: 120px;"><span class="button-server"><a href="samp://149.56.41.55:7777"><i class="fa fa-play-circle fa-3"></i> Conectar-se ao Servidor</a> </span></div><div class="pun-ts" style="margin-top: 175px;"><span class="button-ts"><a href="ts3server://198.50.243.44:7033"><i class="fa fa-volume-control-phone fa-4"></i> Conectar-se ao TeamSpeak³</a> </span></div><div class="pun-info" style="/* float: right; */margin-top: 14px;"><span class="info-server" style="font-size: 11px;color: #1f2b3b;text-shadow: 0px 1px 2px #0000009c;">SA:MP Versão 0.3.7-R2</span></div></div>');
});

Consegue deixar ele bonitinho dessa forma: https://prnt.sc/jt1yup

O que torna ele "bonitinho" é o fato de eles usarem uma imagem de fundo, e ficar aquele efeito de transparência.

Vá no fórum que citei e coloca o mouse encima, tem todo essa "graça"

Acha que consegue fazer algo semelhante?

Eita, desculpa, não reparei que tinha efeito. Aqui tem, adicione ao seu CSS:

Código:

.pun-server:hover {
    background: #03a9f4;
}

.pun-ts:hover {
    background: #989898;
}

Até.

Tem como eu alterar a cor desses dois botões? (antes de colocar o mouse encima)
http://prntscr.com/jt5aes

Olá @Jhool,
no seu CSS localize:

Código:

.pun-ts {
    transition: 0.6s;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33);
    text-align: center;
    color: #fff;
    font-size: 13px;
    padding: 12px;
    background: rgba(152, 152, 152, 0.45);
    border-radius: 5px;
}
 
.pun-server {
    transition: 0.6s;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33);
    text-align: center;
    color: #fff;
    font-size: 13px;
    padding: 12px;
    background: rgba(3, 169, 244, 0.35);
    border-radius: 5px;
}


e a frente de background: mude para a cor pretendida

Atenciosamente,

Obrigado, pode fechar.