Minha questão:

Olá,

Poderiam me dizer algum site, ou sugestões de botões criados através de .CSS, ou seja queria aqueles botões como: "Enviar, Pré-Visualizar, Novo Tópico, Responder" mas em vez de imagens em .CSS

Se souberem agradecia!

---

Não percebi muito bem, você quer o código para criar os botes em CSS? ou exemplos de botões em CSS apénas?

att Jufasa'

Olá,

Como a BestSkins até aqui a UPFórum tem os botões não são imagens, mas sim criados através .CSS certo?

Na BestSkins os botões são imagens, aqui na UPfórum é CSS.

Se quiser saber como se faz é simples:

Crie um JS com o seguinte codigo:

Código:

$(document).ready(function(){$('img[src=" LINK DA IMAGEM DO BOTÃO QUE USA "]').replaceWith('<span class=" CLASSBOTÃO "> NOME DO BOTÃO </span>')});

LINK DA IMAGEM DO BOTÃO QUE USA: o url da imagem que usa por exemplo para "Novo tópico"
NOME DO BOTÃO: Coloque o nome que deseja aparecer no botão exemplo "Novo tópico"
CLASSBOTÃO: Coloque a class que indentificar o botão para que depois possa personalizar o botão exemplo "botaonp", na pagina CSS ira criar esse código:

Código:

.botaonp{ aqui é o código personalizado, cor tamanho.... }

Olá,

Eu gostei destes e gostava de colocar como "Novo Tópico, Responder, Bloqueado":
http://www.arrumablog.com/2013/06/botoes-css-blog-e-sites.html

É o segundo exemplo os azuis, e tem lá a .CSS:

Código:

.ab-boton {
border: none;
margin:10px;
color: #fff;
display: inline-block;
font: 300 16px/31px "Open Sans","Helvetica Neue",Arial,sans-serif !important;
height: 32px;
background-color: #267cc2;
padding: 0 24px;
cursor:pointer;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
white-space: nowrap;
border-radius: 2px;
box-shadow: 0 2px 1px rgba(0,0,0,.19),inset 0 -1px 0 rgba(0,0,0,.19),inset 0 1px 0 0 rgba(255,255,255,.19);
background-color: #267cc2;
background-image: -webkit-gradient(linear,left bottom,left top,from( #42a5e1),to( #267cc2));
background-image: -webkit-linear-gradient( #42a5e1, #267cc2);
background-image: -moz-linear-gradient( #42a5e1, #267cc2);
background-image: -ms-linear-gradient( #42a5e1, #267cc2);
background-image: -o-linear-gradient( #42a5e1, #267cc2);
background-image: linear-gradient( #42a5e1, #267cc2);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
}

.ab-boton:hover {
box-shadow: 0 4px 1px rgba(0,0,0,.19),inset 0 -3px 0 rgba(0,0,0,.19);
text-decoration: none;
}

.ab-boton:active, .ab-boton:focus {
box-shadow: inset 0 2px 0 0 rgba(0,0,0,.19),inset 0 12px 24px 6px rgba(0,0,0,.19),inset 0 0 2px 2px rgba(0,0,0,.19);
}

Só que agora queria saber como activar no meu fórum para os respectivos!

Vá ao Painel de controlo > Visualização > Gestão de imagens > Modo avançado >> Botões
E manda os links das imagens que utilizas como "novo topicos, responder ...." e eu crio o js pronto para si

att Jufasa'

Olá,

Pois mas eu não quero as imagens mas sim estes:
http://www.arrumablog.com/2013/06/botoes-css-blog-e-sites.html

Do segundo exemplo a realizar os efeitos e tudo.

Sim eu comprendi mas para realizar o que pretende é preciso criar o codigo e o código tem como objectivo substituir as imagens que voce tem por os botoes em css...

por isso que lhe pedi as imagens "novo topico, responder, ...." que voce usa

att Jufasa'

Olá,

Desculpe então aqui estão:

Novo Tópico: https://2img.net/i/fa/prosilver/button_topic_new_en.png
Responder: https://2img.net/i/fa/prosilver/button_topic_reply_en.png
Bloqueado: https://2img.net/i/fa/prosilver/button_topic_locked_en.png

Código JS:

Código:

$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/button_topic_new_en.png"]').replaceWith('<span class="botãonovotopico">Novo Tópico</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/button_topic_reply_en.png"]').replaceWith('<span class="botãoresponder">Responder</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/button_topic_locked_en.png"]').replaceWith('<span class="botãobloqueado">Bloqueado</span>')});


Coloque este CSS:

Código:

.botãoresponder, .botãonovotopico, .botãobloqueado {
border: none;
margin:10px;
color: #fff;
display: inline-block;
font: 300 16px/31px "Open Sans","Helvetica Neue",Arial,sans-serif !important;
height: 32px;
background-color: #267cc2;
padding: 0 24px;
cursor:pointer;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
white-space: nowrap;
border-radius: 2px;
box-shadow: 0 2px 1px rgba(0,0,0,.19),inset 0 -1px 0 rgba(0,0,0,.19),inset 0 1px 0 0 rgba(255,255,255,.19);
background-color: #267cc2;
background-image: -webkit-gradient(linear,left bottom,left top,from( #42a5e1),to( #267cc2));
background-image: -webkit-linear-gradient( #42a5e1, #267cc2);
background-image: -moz-linear-gradient( #42a5e1, #267cc2);
background-image: -ms-linear-gradient( #42a5e1, #267cc2);
background-image: -o-linear-gradient( #42a5e1, #267cc2);
background-image: linear-gradient( #42a5e1, #267cc2);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
}

.botãoresponder:hover, .botãonovotopico:hover, .botãobloqueado:hover {
box-shadow: 0 4px 1px rgba(0,0,0,.19),inset 0 -3px 0 rgba(0,0,0,.19);
text-decoration: none;
}

.botãoresponder:active, .botãonovotopico:active, .botãobloqueado:active, .botãoresponder:focus, .botãonovotopico:focus, .botãobloqueado:focus {
box-shadow: inset 0 2px 0 0 rgba(0,0,0,.19),inset 0 12px 24px 6px rgba(0,0,0,.19),inset 0 0 2px 2px rgba(0,0,0,.19);
}

att Jufasa'

Olá,

Dá para colocar o botão "Bloqueado" em vermelho? E uma dúvida se quiser colocar um ícone antes é possível?

Troque o que lhe passei por este:

Código:

.botãoresponder, .botãonovotopico {
border: none;
margin:10px;
color: #fff;
display: inline-block;
font: 300 16px/31px "Open Sans","Helvetica Neue",Arial,sans-serif !important;
height: 32px;
background-color: #267cc2;
padding: 0 24px;
cursor:pointer;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
white-space: nowrap;
border-radius: 2px;
box-shadow: 0 2px 1px rgba(0,0,0,.19),inset 0 -1px 0 rgba(0,0,0,.19),inset 0 1px 0 0 rgba(255,255,255,.19);
background-color: #267cc2;
background-image: -webkit-gradient(linear,left bottom,left top,from( #42a5e1),to( #267cc2));
background-image: -webkit-linear-gradient( #42a5e1, #267cc2);
background-image: -moz-linear-gradient( #42a5e1, #267cc2);
background-image: -ms-linear-gradient( #42a5e1, #267cc2);
background-image: -o-linear-gradient( #42a5e1, #267cc2);
background-image: linear-gradient( #42a5e1, #267cc2);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
}
.botãobloqueado {
border: none;
margin:10px;
color: #fff;
display: inline-block;
font: 300 16px/31px "Open Sans","Helvetica Neue",Arial,sans-serif !important;
height: 32px;
padding: 0 24px;
cursor:pointer;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
white-space: nowrap;
border-radius: 2px;
box-shadow: 0 2px 1px rgba(0,0,0,.19),inset 0 -1px 0 rgba(0,0,0,.19),inset 0 1px 0 0 rgba(255,255,255,.19);
background-color: rgb(194, 38, 38);
background-image: linear-gradient(rgb(225, 66, 66), rgb(194, 38, 38));
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
}
.botãoresponder:hover, .botãonovotopico:hover, .botãobloqueado:hover {
box-shadow: 0 4px 1px rgba(0,0,0,.19),inset 0 -3px 0 rgba(0,0,0,.19);
text-decoration: none;
}

.botãoresponder:active, .botãonovotopico:active, .botãobloqueado:active, .botãoresponder:focus, .botãonovotopico:focus, .botãobloqueado:focus {
box-shadow: inset 0 2px 0 0 rgba(0,0,0,.19),inset 0 12px 24px 6px rgba(0,0,0,.19),inset 0 0 2px 2px rgba(0,0,0,.19);
}

E sim dá para colocar imagem no botão basta ir ao codigo e colocar a tras do:

Código:

<span class="botãonovotopico">Novo Tópico</span>

Colocar:

Código:

<img src="link da imagem">

ficaria assim:

Código:

<img src="link da imagem"><span class="botãonovotopico">Novo Tópico</span>

att Jufasa'

Olá,

Agora para aqueles botões "Citar, Editar, Eliminar, Obrigado(a), Obrigado(a) (Já feito)" o .CSS que quero é este:

Código:

.button {
  border: 1px solid #CCCCCC;
  background: #EEEEEE;
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EEEEEE));
  background: -webkit-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -ms-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -o-linear-gradient(top, #FFFFFF, #EEEEEE);
  background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);
  padding: 0px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
  -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
  box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
  text-shadow: #FFFFFF 0 1px 0;
  color: #333333;
  font-size: 11px;
  font-family: Arial, Helvetica, Serif;
  font-weight: bold;
  text-decoration: none;
  vertical-align: middle;
  }
.button:hover {
  border: 1px solid #CCCCCC;
  text-shadow: #FFFFFF 0 1px 0;
  background: #EEEEEE;
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EEEEEE));
  background: -webkit-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -ms-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -o-linear-gradient(top, #FFFFFF, #EEEEEE);
  background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);
  color: #333333;
  text-decoration: none;
  }
.button:active {
  text-shadow: #FFFFFF 0 1px 0;
  border: 1px solid #CCCCCC;
  background: #FFFFFF;
  background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#EEEEEE));
  background: -webkit-linear-gradient(top, #EEEEEE, #FFFFFF);
  background: -moz-linear-gradient(top, #EEEEEE, #FFFFFF);
  background: -ms-linear-gradient(top, #EEEEEE, #FFFFFF);
  background: -o-linear-gradient(top, #EEEEEE, #FFFFFF);
  background-image: -ms-linear-gradient(top, #EEEEEE 0%, #FFFFFF 100%);
  color: #333333;
  }

Link das imagens:

Citar: https://2img.net/i/fa/prosilver/icon_post_quote_en.png
Editar: https://2img.net/i/fa/prosilver/icon_post_edit.png
Eliminar: https://2img.net/i/fa/prosilver/icon_post_delete.gif
Obrigado(a): https://2img.net/i/fa/subsilver/icon_thanks_off_en.png
Obrigado(a) já feito: https://2img.net/i/fa/subsilver/icon_thanks_on_en.png

Codigo JS:

Código:

$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/icon_post_quote_en.png"]').replaceWith('<span class="botaotopicos">Citar</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/icon_post_edit.png"]').replaceWith('<span class="botaotopicos">Editar</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/icon_post_delete.gif"]').replaceWith('<span class="botaotopicos">Eliminar</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/subsilver/icon_thanks_off_en.png"]').replaceWith('<span class="botaotopicos">Obrigado(a)</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/subsilver/icon_thanks_on_en.png"]').replaceWith('<span class="botaotopicos">Agradecido</span>')});

Codigo CSS:

Código:

.botaotopicos {
  border: 1px solid #CCCCCC;
  background: #EEEEEE;
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EEEEEE));
  background: -webkit-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -ms-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -o-linear-gradient(top, #FFFFFF, #EEEEEE);
  background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);
  padding: 0px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
  -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
  box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
  text-shadow: #FFFFFF 0 1px 0;
  color: #333333;
  font-size: 11px;
  font-family: Arial, Helvetica, Serif;
  font-weight: bold;
  text-decoration: none;
  vertical-align: middle;
  }
.botaotopicos:hover {
  border: 1px solid #CCCCCC;
  text-shadow: #FFFFFF 0 1px 0;
  background: #EEEEEE;
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EEEEEE));
  background: -webkit-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -ms-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -o-linear-gradient(top, #FFFFFF, #EEEEEE);
  background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);
  color: #333333;
  text-decoration: none;
  }
.botaotopicos:active {
  text-shadow: #FFFFFF 0 1px 0;
  border: 1px solid #CCCCCC;
  background: #FFFFFF;
  background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#EEEEEE));
  background: -webkit-linear-gradient(top, #EEEEEE, #FFFFFF);
  background: -moz-linear-gradient(top, #EEEEEE, #FFFFFF);
  background: -ms-linear-gradient(top, #EEEEEE, #FFFFFF);
  background: -o-linear-gradient(top, #EEEEEE, #FFFFFF);
  background-image: -ms-linear-gradient(top, #EEEEEE 0%, #FFFFFF 100%);
  color: #333333;
  }

Olá,

Resultou, mas não aparece o botão de Obrigado(a).

Você tem o botão obrigado activado?

att Jufasa'

Painel de Controlo   Módulos   Reputação

Ativar o botão "Obrigado(a)" : [x]Sim []Não

Olá,

Sim tudo ativado!

Troque o JS por este:

Código:

$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/icon_post_quote_en.png"]').replaceWith('<span class="botaotopicos">Citar</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/icon_post_edit.png"]').replaceWith('<span class="botaotopicos">Editar</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/icon_post_delete.gif"]').replaceWith('<span class="botaotopicos">Eliminar</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/subsilver/icon_thanks_off_en.png"]').replaceWith('<span class="botaotopicos">Obrigado/a</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/subsilver/icon_thanks_on_en.png"]').replaceWith('<span class="botaotopicos">Agradecido</span>')});

Olá,

Apareceu, só que aparece sempre "Agradecido" devia aparecer primeiro "Obrigado(a)" depois "Aparecido".

desculpe, tente trocar por este então:

Código:

$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/icon_post_quote_en.png"]').replaceWith('<span class="botaotopicos">Citar</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/icon_post_edit.png"]').replaceWith('<span class="botaotopicos">Editar</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/icon_post_delete.gif"]').replaceWith('<span class="botaotopicos">Eliminar</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/subsilver/icon_thanks_on_en.png"]').replaceWith('<span class="botaotopicos">Obrigado/a</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/subsilver/icon_thanks_off_en.png"]').replaceWith('<span class="botaotopicos">Agradecido</span>')});

att Jufasa'

Olá,

Agora aparece sempre "Obrigado/a" mesmo que agradeça aparece sempre "Obrigado/a".

Olá tente mudar a imagem do "Obrigado Feito" e depois coloque o link onde diz " LINK AQUI "(ultima linha) no código:

Código:

$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/icon_post_quote_en.png"]').replaceWith('<span class="botaotopicos">Citar</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/icon_post_edit.png"]').replaceWith('<span class="botaotopicos">Editar</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/icon_post_delete.gif"]').replaceWith('<span class="botaotopicos">Eliminar</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/subsilver/icon_thanks_on_en.png"]').replaceWith('<span class="botaotopicos">Obrigado/a</span>')});
$(document).ready(function(){$('img[src=" LINK AQUI "]').replaceWith('<span class="botaotopicos">Agradecido</span>')});

att Jufasa'

Olá,

Poderia escrever algo aqui?
http://master-publicitario.forumeiros.com/t547-jufasa-aqui#2210

Feito amigo

Olá,

Perfeito de mais amigo, resolvido, obrigado!

estou de suporte para isso