Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.


Você não está conectado. Conecte-se ou registre-se

 » Serviços para Usuários » Suporte a fóruns » Arquivo "Suporte a fóruns" »  Botões Personalizados Bonitos

Botões Personalizados Bonitos

2 participantes

Ir para baixo  Mensagem [Página 1 de 1]

1 Botões Personalizados Bonitos Empty Botões Personalizados Bonitos Sáb Set 21, 2013 9:57 am

d0C

d0C
Nivel 6

Link do fórum: http://corrente-grafica.forumeiro.com/

Versão: PUNBB

Imagens do problema: Botões Personalizados Bonitos 6546cb59

Descrição do problema: Olá mais uma vez, sim mais uma vez a todos! Smile
Bem, desta vez gostaria de obter os botões demonstrados abaixo na imagem.
Também aqui abaixo têm o link do fórum onde os encontrei.
Fórum: http://www.15-tronos.net/

Espero obter ajuda.
Cumprimentos, d0C.

2 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Sáb Set 21, 2013 11:18 am

Cʀɑzy

Cʀɑzy
Admin
Admin

Olá,

Aqui está o código:
Código:
    $(function(){
$('.pun').append('<div class="bloqvip"><a href="#" target="_blank"><div class="tibq">Soporte <strong>100%</strong></div>Gratuito</a></div>

<div class="mianunce"><a href="#" target="_blank"><div class="tibq">Anuncie <strong>$$</strong></div></a></div>

<div class="bloqvip"><a href="#" target="_blank"><div class="tibq">Skin Premium <strong>20%</strong></div>Gratuito</a></div>


        <style type="text/css">.bloqvip {
            width: 254px;
            background: #71A200;
            text-align: center;
            border-radius: 3px;
            box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;
            -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
        }
.bloqvipblue {
    margin-top: 20px;
    width: 254px; 
    background: #009fff;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
}</style>
.mianunce {
    margin-top: 20px;  width: 254px; 
    background: #FF5C00;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
    padding: 6px 0;
}');
});
Até mais.

http://programando.forum-pro.net

3 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Sáb Set 21, 2013 4:08 pm

d0C

d0C
Nivel 6

Olá Crazy, eu adicionei esse código em meu fórum, está de momento activo abaixo da caixa do membro do mes, mas está bugado.

Espero obter ajuda.
Obrigado.

4 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Sáb Set 21, 2013 6:31 pm

Cʀɑzy

Cʀɑzy
Admin
Admin

Meu caro,

Não sabe o que e criar um novo código javascript?
Se quiser por ali, troque o código por esse:
Código:
<div class="bloqvip"><a href="#" target="_blank"><div class="tibq">Soporte <strong>100%</strong></div>Gratuito</a></div>

<div class="mianunce"><a href="#" target="_blank"><div class="tibq">Anuncie <strong>$$</strong></div></a></div>

<div class="bloqvip"><a href="#" target="_blank"><div class="tibq">Skin Premium <strong>20%</strong></div>Gratuito</a></div>


        <style type="text/css">.bloqvip {
            width: 254px;
            background: #71A200;
            text-align: center;
            border-radius: 3px;
            box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;
            -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
        }
.bloqvipblue {
    margin-top: 20px;
    width: 254px;
    background: #009fff;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
}
.mianunce {
    margin-top: 20px;  width: 254px;
    background: #FF5C00;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
    padding: 6px 0;
</style>
Até.

http://programando.forum-pro.net

5 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Dom Set 22, 2013 7:02 am

d0C

d0C
Nivel 6

Está bugado.
Pode ver.
Até mais.

6 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Dom Set 22, 2013 11:27 am

Cʀɑzy

Cʀɑzy
Admin
Admin

Olá,

Troque o código por esse:
Código:
    $(function(){
$('.pun').append('<div class="bloqvip"><a href="#" target="_blank"><div class="tibq">Soporte <strong>100%</strong></div>Gratuito</a></div>

<div class="mianunce"><a href="#" target="_blank"><div class="tibq">Anuncie <strong>$$</strong></div></a></div>

<div class="bloqvip"><a href="#" target="_blank"><div class="tibq">Skin Premium <strong>20%</strong></div>Gratuito</a></div>


        <style type="text/css">.bloqvip {
            width: 254px;
            background: #71A200;
            text-align: center;
            border-radius: 3px;
            box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;
            -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
        }
.bloqvipblue {
    margin-top: 20px;
    width: 254px;
    background: #009fff;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
}
.mianunce {
    margin-top: 20px;  width: 254px;
    background: #FF5C00;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
    padding: 6px 0;</style>');
});

http://programando.forum-pro.net

7 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Dom Set 22, 2013 2:58 pm

d0C

d0C
Nivel 6

Como pode ver continua bugado.
Gostava de obter o mesmo efeito.

Cumprimentos.

8 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Dom Set 22, 2013 3:47 pm

Cʀɑzy

Cʀɑzy
Admin
Admin

Olá,

Não tem como por lá --> A tua estrutura e diferente.. =/


Até..

http://programando.forum-pro.net

9 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Seg Set 23, 2013 12:21 pm

d0C

d0C
Nivel 6

Então seria possível de colocar acima das categorias mas com o mesmo efeito que o do 15-tronos?

Obrigado, e cumprimentos.

10 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Ter Set 24, 2013 10:17 am

Cʀɑzy

Cʀɑzy
Admin
Admin

Olá,

'-' Aqui está normal senhor, está faltando algum efeito? Para por nas categorias, troque o código por esse:
Código:
    $(function(){
$('#main-content').prepend('<div style="float: right" class="bloqvip"><a href="#" target="_blank"><div class="tibq">Soporte <strong>100%</strong></div>Gratuito</a></div>

<div class="mianunce"><a href="#" target="_blank"><div class="tibq">Anuncie <strong>$$</strong></div></a></div>

<div class="bloqvip"><a href="#" target="_blank"><div class="tibq">Skin Premium <strong>20%</strong></div>Gratuito</a></div>


        <style type="text/css">.bloqvip {
            width: 254px;
            background: #71A200;
            text-align: center;
            border-radius: 3px;
            box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;
            -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
        }
.bloqvipblue {
    margin-top: 20px;
    width: 254px;
    background: #009fff;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
}
.mianunce {
    margin-top: 20px;  width: 254px;
    background: #FF5C00;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
    padding: 6px 0;</style>');
});
Até mais.

http://programando.forum-pro.net

11 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Ter Set 24, 2013 10:30 am

d0C

d0C
Nivel 6

Olá, Cʀɑzy.
Sim a mim só aparece o fundo e o texto com o link mais nada, estou usando o Chrome.

Cumprimentos.

12 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Ter Set 24, 2013 11:03 am

Cʀɑzy

Cʀɑzy
Admin
Admin

Olá,

É, o chorome e um ... com códigos..
Adicione na tua CSS:
Código:
.bloqvip {
            width: 254px;
            background: #71A200;
            text-align: center;
            border-radius: 3px;
            box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;
            -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
        }
.bloqvipblue {
    margin-top: 20px;
    width: 254px;
    background: #009fff;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
}
.mianunce {
    margin-top: 20px;  width: 254px;
    background: #FF5C00;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
    padding: 6px 0;
}
Até..

http://programando.forum-pro.net

13 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Qua Set 25, 2013 5:25 am

d0C

d0C
Nivel 6

Olá amigo Crazy.
Como pode ver tudo ficou igual...
Espero obter ajuda.
Cumprimentos.

14 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Qua Set 25, 2013 9:44 am

Cʀɑzy

Cʀɑzy
Admin
Admin

Meu caro,

Fui em seu fórum e está normal..
Veja:
http://4image.kgngames.com/img/131380116663.png

O problema não e no código, e ai..

http://programando.forum-pro.net

15 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Qui Set 26, 2013 3:05 am

d0C

d0C
Nivel 6

Amigo aqui está igual, está como na imagem.
Mas eu gostaria de colocar como na imagem de demonstração.

Cumprimentos.

16 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Qui Set 26, 2013 8:06 am

Cʀɑzy

Cʀɑzy
Admin
Admin

Olá,

Troque por:
Código:
    $(function(){
$('#main-content').prepend('
 <div style="float: right" class="bloqvip"><a class="tibq" href="#" target="_blank"><div class="tibq">Soporte 100%<br><strong> Gratuito</strong></div></a></div>
<br>
<div class="mianunce"><a class="tibq" href="#" target="_blank"><div class="tibq">Anuncie <strong>$$</strong></div></a></div>
<br>
<div class="bloqvip"><a class="tibq" href="#" target="_blank"><div class="tibq">Skin Premium 20%<br> <strong>Gratuito</strong></div></a></div>


        <style type="text/css">.bloqvip {
          padding: 6px 0;
   padding-top: 10px;
   padding-bottom: 10px;
            width: 254px;
            background: #71A200;
            text-align: center;
            border-radius: 3px;
            box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;
            -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
        }
.bloqvipblue {
    padding: 6px 0;
   padding-top: 10px;
   padding-bottom: 10px;
    margin-top: 20px;
    width: 254px;
    background: #009fff;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
}
.mianunce {
    margin-top: 20px;  width: 254px;
    background: #FF5C00;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
    padding: 6px 0;
   padding-top: 10px;
   padding-bottom: 10px;
   }

.tibq {
    font-size: 20px;
    font-family: verdana;
    font-style: normal;
    font-weight: bold;
   text-decoration: none !important;
   color: white;
}
.tibq a {
text-decoration: none !important;
}
.tibq strong {
font-size: 14px;
font-style: italic;
font-weight: normal;
}
   </style>');
});
Até..

http://programando.forum-pro.net

17 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Qui Set 26, 2013 9:55 am

d0C

d0C
Nivel 6

Amigo Cʀɑzy.
Já pegou o efeito do texto, agora seria possível o efeito ao passar o mouse o texto aumentar?

Cumprimentos.

18 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Qui Set 26, 2013 10:58 am

Cʀɑzy

Cʀɑzy
Admin
Admin

Olá,

Troque por:
Código:
    $(function(){
$('#main-content').prepend(' <class="anuncbloq">
 <div style="float: right" class="bloqvip"><a class="tibq" href="#" target="_blank"><div class="tibq">Soporte 100%<br><strong> Gratuito</strong></div></a></div>
<br>
<div class="mianunce"><a class="tibq" href="#" target="_blank"><div class="tibq">Anuncie <strong>$$</strong></div></a></div>
<br>
<div class="bloqvip"><a class="tibq" href="#" target="_blank"><div class="tibq">Skin Premium 20%<br> <strong>Gratuito</strong></div></a></div>
</div>

        <style type="text/css">
      .bloqvip:hover, .bloqvipblue:hover, .mianunce:hover {padding-top: 16px;transform: scale(1.1); -o-transform: scale(1.1);  -ms-transform: scale(1.1);  -moz-transform: scale(1.1);  -webkit-transform: scale(1.1);    }
.anuncbloq {-webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;}
      .bloqvip {
          padding: 6px 0;
   padding-top: 10px;
   padding-bottom: 10px;
            width: 254px;
            background: #71A200;
            text-align: center;
            border-radius: 3px;
            box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;
            -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
        }
.bloqvipblue {
    padding: 6px 0;
   padding-top: 10px;
   padding-bottom: 10px;
    margin-top: 20px;
    width: 254px;
    background: #009fff;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
}
.mianunce {
    margin-top: 20px;  width: 254px;
    background: #FF5C00;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
    padding: 6px 0;
   padding-top: 10px;
   padding-bottom: 10px;
   }

.tibq {
    font-size: 20px;
    font-family: verdana;
    font-style: normal;
    font-weight: bold;
   text-decoration: none !important;
   color: white;
}
.tibq a {
text-decoration: none !important;
}
.tibq strong {
font-size: 14px;
font-style: italic;
font-weight: normal;
}
   </style>');
});
Até..

http://programando.forum-pro.net

19 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Qui Set 26, 2013 3:10 pm

d0C

d0C
Nivel 6

Olá Crazy.

Deu certo.
Mas poderia obter o mesmo efeito 100% igual?
E de preferência gostaria de os centrar o botões.

Cumprimentos.

20 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Qui Set 26, 2013 4:31 pm

Cʀɑzy

Cʀɑzy
Admin
Admin

Olá,

Troque por:
Código:
    $(function(){
$('#main-content').prepend(' <div style="text-align: center" class="anuncbloq">
 <div style="float: right" class="bloqvip"><a class="tibq" href="#" target="_blank"><div class="tibq">Soporte 100%<br><strong> Gratuito</strong></div></a></div>
<br>
<div class="mianunce"><a class="tibq" href="#" target="_blank"><div class="tibq">Anuncie <strong>$$</strong></div></a></div>
<br>
<div class="bloqvip"><a class="tibq" href="#" target="_blank"><div class="tibq">Skin Premium 20%<br> <strong>Gratuito</strong></div></a></div>
</div>

        <style type="text/css">
      .bloqvip:hover, .bloqvipblue:hover, .mianunce:hover {padding-top: 16px;transform: scale(1.1); -o-transform: scale(1.1);  -ms-transform: scale(1.1);  -moz-transform: scale(1.1);  -webkit-transform: scale(1.1);    }
.anuncbloq {-webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;}
      .bloqvip {
          padding: 6px 0;
  padding-top: 10px;
  padding-bottom: 10px;
            width: 254px;
            background: #71A200;
            text-align: center;
            border-radius: 3px;
            box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;
            -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
        }
.bloqvipblue {
    padding: 6px 0;
  padding-top: 10px;
  padding-bottom: 10px;
    margin-top: 20px;
    width: 254px;
    background: #009fff;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
}
.mianunce {
    margin-top: 20px;  width: 254px;
    background: #FF5C00;  text-align: center;  border-radius: 3px;  box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.22) inset;  -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
    padding: 6px 0;
  padding-top: 10px;
  padding-bottom: 10px;
  }

.tibq {
    font-size: 20px;
    font-family: verdana;
    font-style: normal;
    font-weight: bold;
  text-decoration: none !important;
  color: white;
}
.tibq a {
text-decoration: none !important;
}
.tibq strong {
font-size: 14px;
font-style: italic;
font-weight: normal;
}
  </style>');
});
seta No código procure por 'padding-top: 16px;' vá diminuindo, para controlar o efeito ao passar o mouse.

Até mais.

http://programando.forum-pro.net

21 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Sex Set 27, 2013 5:26 am

d0C

d0C
Nivel 6

Olá, como poderia eu fazer para centrar os botoes?

Obrigado.

22 Botões Personalizados Bonitos Empty Re: Botões Personalizados Bonitos Sex Set 27, 2013 9:11 am

Cʀɑzy

Cʀɑzy
Admin
Admin

Olá,

Centrar como assim? O texto? Ele já está centrado.

Até..

http://programando.forum-pro.net

Conteúdo patrocinado



Ir para o topo  Mensagem [Página 1 de 1]

 » Serviços para Usuários » Suporte a fóruns » Arquivo "Suporte a fóruns" »  Botões Personalizados Bonitos

Permissões neste sub-fórum
Não podes responder a tópicos