Trocar por uma imagem
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Trocar por uma imagem
Qual é minha questão:
Olá,
Eu utilizei um efeito de MP Rápida nos tópicos, só queria agora mudar a forma do botão, queria antes colocar uma imagem.
Código CSS:
Código jS:
Como está:
Botão que queria:
Endereço do meu fórum:
http://www.master-publicitario.forumeiros.com
Versão do fórum:
PHPBB3
Olá,
Eu utilizei um efeito de MP Rápida nos tópicos, só queria agora mudar a forma do botão, queria antes colocar uma imagem.
Código CSS:
- Código:
/*www.rmbr.forumeiros.com*/
/*popup*/
#btn-e-p{
font-weight:bold;
cursor:pointer;
transition:all 0.2s;
}
#btn-e-p:hover{
color:#f0f0f0;
background:#ADADAD;
transition:all 0.2s;
}
#formulario-mp #username{
font-weight:bold
}
#formulario-mp #username, #formulario-mp input{
min-height:20px;
border:1px solid #333;
border-radius:4px;
}
#formulario-mp #text_editor_textarea{
border:1px solid #333;
border-radius:4px;
}
#mp-r:hover{
color:black;
transition:all 0.5s;
background: rgb(96,96,96); /* Old browsers */
background: -moz-linear-gradient(top, rgba(96,96,96,1) 0%, rgba(214,214,214,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,96,96,1)), color-stop(100%,rgba(214,214,214,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
}
#mp-r{
padding:6px;
transition:all 0.5s;
border:3px solid black;
border-radius:6px;
background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top, rgba(214,214,214,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,214,214,1)), color-stop(100%,rgba(96,96,96,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
color:white;
font-weight:bold;cursor:pointer;
}
#popup{
eft:-100px!Important;
box-shadow:9px 8px 20px grey;
border-radius:9px;
height:auto;
cursor:pointer;
width:300px;
position:absolute;
right:420px;
padding:13px;
border:3px solid black;
color:#333;font-weight:bold;
background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top, rgba(214,214,214,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,214,214,1)), color-stop(100%,rgba(96,96,96,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
}
#X{
color:white;
background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top, rgba(214,214,214,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,214,214,1)), color-stop(100%,rgba(96,96,96,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(214,214,214,1) 0%,rgba(96,96,96,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
border:1px solid #0C5E03;
cursor:pointer;border-radius:3px;
width:8px;height:8px;padding-right:3px;
padding-left:3px;padding-bottom:8.5px;border:1px solid black;color:white;font-weight:bold
}
#X:hover{
color:black;
background: #a1dbff; /* Old browsers */
background: rgb(96,96,96); /* Old browsers */
background: -moz-linear-gradient(top, rgba(96,96,96,1) 0%, rgba(214,214,214,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,96,96,1)), color-stop(100%,rgba(214,214,214,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(96,96,96,1) 0%,rgba(214,214,214,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
}
Código jS:
- Código:
$(document).ready(function(){
$(".profile-icons:first").append('<span style="position:relative;top:-3px;margin-top:-5px" id="mp-r">MP RÁPIDA</span>');
$("#mp-r").after("<div id='popup' style=''></div>");
$("#popup").html('<div id="X" style="color:white">X</div>'+'<center><br><form id="formulario-mp" style="text-align:left" action="/privmsg" method="post" name="post" enctype="multipart/form-data">Enviar MP Para:<br><input id="username" name="username" value="" id="user" type="text"><br><br>Título:<br><input style="width:250px" value="" name="subject" type="text">
Assunto:<br><textarea style="" id="text_editor_textarea" name="message"></textarea><!--mensagem--><input name="folder" value="inbox" type="hidden"><input name="mode" value="post" type="hidden"><input name="lt" value="" type="hidden"><br><br><input name="post" id="btn-e-p" value="Enviar MP" type="submit"><input type="submit" id="btn-e-p" name="preview" class="" style="margin-left:7px" value="Pré-visualizar" /></form>'+'<br><b style="font-size:8px;opacity:0.6;" />Feito por HenRyqUéè</b></center>');
$("#X").click(function(){
$("#popup").fadeOut();
$(this).fadeOut();
});
$("#popup").hide();
$("#mp-r").click(function(){
$("#X").fadeToggle();
$("#popup").fadeToggle();
});
});
Como está:
Botão que queria:
Endereço do meu fórum:
http://www.master-publicitario.forumeiros.com
Versão do fórum:
PHPBB3
Última edição por Master Publicitario em 11.01.13 19:17, editado 1 vez(es)
Re: Trocar por uma imagem
Saudações!
Infelizmente eu não compreendi o jeito que deseja amigo, poderia especificar?
Até mais!
Infelizmente eu não compreendi o jeito que deseja amigo, poderia especificar?
Até mais!
Tópicos semelhantes
» trocar imagem
» Trocar imagem
» trocar imagem do menu
» Trocar imagem ao por o mouse em cima
» Trocar essa imagem
» Trocar imagem
» trocar imagem do menu
» Trocar imagem ao por o mouse em cima
» Trocar essa imagem
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos