Como transformo esses links em botões?

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Como transformo esses links em botões?

Mensagem por Legolass em 14/05/13, 11:25 am

Qual é minha questão:
Como faço para transformar os links "Compartilhe" e "Mais!" em botões?

Veja a imagem:



Endereço do meu fórum:
http://www.fanfictionunited.com.br

Versão do fórum:
PHPBB2


Última edição por Cris Varella em 14/05/13, 06:22 pm, editado 1 vez(es)
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como transformo esses links em botões?

Mensagem por [F]lames em 14/05/13, 11:56 am

Olá,

Adicione este código á teu CSS:

Código:
table[width="100%"][border="0"][cellspacing="2"][cellpadding="0"] tbody tr:first-child td.nav + td[align="right"] .bold a {
background: rgba(255, 255, 255, 0.64);
display: inline-block;
padding: 7px 30px;
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.20);
border: 1px solid rgba(0,0,0,0.19);
margin: 5px 0;
border-radius: 1px;
}
Resulta?

Atenciosamente.
avatar

[F]lames
Usuário destaque

Masculino
Inscrito dia : 05/10/2012
Mensagens : 866
Pontos Ativos : 1207

Ver perfil do usuário http://www.bestskins.net/

Resolvido Re: Como transformo esses links em botões?

Mensagem por Legolass em 14/05/13, 01:17 pm

Olá,

Adicione este código á teu CSS:

Código:Selecionar conteúdo
table[width="100%"][border="0"][cellspacing="2"][cellpadding="0"] tbody tr:first-child td.nav + td[align="right"] .bold a {
background: rgba(255, 255, 255, 0.64);
display: inline-block;
padding: 7px 30px;
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.20);
border: 1px solid rgba(0,0,0,0.19);
margin: 5px 0;
border-radius: 1px;
}


Resulta?

Atenciosamente.

Olá, ele apenas criou uma tabela ao redor dos links. Eu queria transformá-los em botões, assim como é aqui no FdF, para que tenha um efeito de hover neles.
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como transformo esses links em botões?

Mensagem por [F]lames em 14/05/13, 05:58 pm

Olá,

Substitua o código por este:

Código:
table[width="100%"][border="0"][cellspacing="2"][cellpadding="0"] tbody tr:first-child td.nav + td[align="right"] .bold a {
border: 1px solid rgb(221, 221, 221);
background-color: rgb(241, 241, 241);
border-image: initial;
border-radius: 2px;
color: rgb(102, 102, 102);
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 17px;
margin: 5px 0;
padding: 4px 7px 3px 7px;
text-align: center;
text-decoration: none;
}
table[width="100%"][border="0"][cellspacing="2"][cellpadding="0"] tbody tr:first-child td.nav + td[align="right"] .bold a:hover {
background-color: rgb(153, 153, 153) !important;
border: 1px solid rgb(153, 153, 153);
color: white !important;
text-decoration: none !important;
}
Resulta?

Atenciosamente.
avatar

[F]lames
Usuário destaque

Masculino
Inscrito dia : 05/10/2012
Mensagens : 866
Pontos Ativos : 1207

Ver perfil do usuário http://www.bestskins.net/

Resolvido Re: Como transformo esses links em botões?

Mensagem por Legolass em 14/05/13, 06:21 pm

Olá,

Substitua o código por este:

Código:Selecionar conteúdo
table[width="100%"][border="0"][cellspacing="2"][cellpadding="0"] tbody tr:first-child td.nav + td[align="right"] .bold a {
border: 1px solid rgb(221, 221, 221);
background-color: rgb(241, 241, 241);
border-image: initial;
border-radius: 2px;
color: rgb(102, 102, 102);
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 17px;
margin: 5px 0;
padding: 4px 7px 3px 7px;
text-align: center;
text-decoration: none;
}
table[width="100%"][border="0"][cellspacing="2"][cellpadding="0"] tbody tr:first-child td.nav + td[align="right"] .bold a:hover {
background-color: rgb(153, 153, 153) !important;
border: 1px solid rgb(153, 153, 153);
color: white !important;
text-decoration: none !important;
}


Resulta?

Atenciosamente.

Agora ficou perfeito amigo! Pode fechar
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum