Como transformo esses links em botões?

2 participantes

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

Tópico resolvido Como transformo esses links em botões?

Mensagem por Legolass 14.05.13 15:25

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

Veja a imagem:

Como transformo esses links em botões? 30bl4wl

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 22:22, editado 1 vez(es)
Legolass

Legolass
Membro

Membro desde : 10/04/2013
Mensagens : 651
Pontos : 912

http://www.fanfictionunited.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Como transformo esses links em botões?

Mensagem por [F]lames 14.05.13 15:56

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.
[F]lames

[F]lames
Membro

Membro desde : 05/10/2012
Mensagens : 866
Pontos : 1208

http://www.bestskins.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como transformo esses links em botões?

Mensagem por Legolass 14.05.13 17:17

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.
Legolass

Legolass
Membro

Membro desde : 10/04/2013
Mensagens : 651
Pontos : 912

http://www.fanfictionunited.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Como transformo esses links em botões?

Mensagem por [F]lames 14.05.13 21:58

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.
[F]lames

[F]lames
Membro

Membro desde : 05/10/2012
Mensagens : 866
Pontos : 1208

http://www.bestskins.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como transformo esses links em botões?

Mensagem por Legolass 14.05.13 22:21

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
Legolass

Legolass
Membro

Membro desde : 10/04/2013
Mensagens : 651
Pontos : 912

http://www.fanfictionunited.com.br

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


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