Botão personalizado

Qual é minha questão:

Código:

/*BOTÕES*/
#quick_reply > div:nth-child(2) > input:nth-child(9):hover {
 -moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #427517 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0;
border: 0;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
white-space: nowrap;  
}
#quick_reply > div:nth-child(2) > input:nth-child(9) {
-webkit-border-radius: 2px;
background: #155D98 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0;
border: 0;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
white-space: nowrap;
}
.mainoption, .pun .frm .frm-buttons input, a.button2, body:last-child a.button1, input.button1, input[type="button"], input[type="submit"]{
-webkit-border-radius: 2px;
background: #155D98 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0;
border: 0;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
white-space: nowrap;  
}
.mainoption, .pun .frm .frm-buttons input, a.button2, body:last-child a.button1, input.button1, input[type="button"], input[type="submit"]:hover{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #427517 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0;
border: 0;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
white-space: nowrap;
}


O botão não ficou correto em algumas áreas. Vou especifica-las abaixo:

Normal está cor: #155D98
Hover: #427517

Opções perfil


Retirar efeito da caixa bbcode


Devem ficar assim


Endereço do meu fórum:
http://visualart.ativoforum.com

Versão do fórum:
PHPBB3

Olá,

Senhor, poderia me informar o endereço do fórum onde você viu tal efeito?


Até mais,
Passar bem.  

Olá,

Troque o código por este:

Código:


    /*BOTÕES*/
    #quick_reply > div:nth-child(2) > input:nth-child(9):hover {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background: #427517 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0;
    border: 0;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
    white-space: nowrap; 
    }
    #quick_reply > div:nth-child(2) > input:nth-child(9) {
    -webkit-border-radius: 2px;
    background: #155D98 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0;
    border: 0;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
    white-space: nowrap;
    }
a.button1, a.button2, button.button2, input.button1, input.button2:hover {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background: #427517 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0!important;
    border: 0;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
    white-space: nowrap;
    }
a.button1, a.button2, button.button2, input.button1, input.button2 {
    -webkit-border-radius: 2px;
    background: #155D98 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0!important;
    border: 0;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
    white-space: nowrap; 
    }
    .mainoption, .pun .frm .frm-buttons input, a.button2, body:last-child a.button1, input.button1, input[type="button"], input[type="submit"]:hover{
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background: #427517 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0!important;
    border: 0;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
    white-space: nowrap;
    }
    .mainoption, .pun .frm .frm-buttons input, a.button2, body:last-child a.button1, input.button1, input[type="button"], input[type="submit"]{
    -webkit-border-radius: 2px;
    background: #155D98 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0!important;
    border: 0;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
    white-space: nowrap; 
    }



Dentro da caixa bbcode não ficou certo...



Dentro das opções do perfil a escrita não está centralizado.



o código está aplicado no fórum teste...

http://testevisualart.ativoforum.com

Olá,

Aqui em meu navegador os botões estão centralizados corretamente, somente reparei que o botão Reiniciar não está em negrito, substitua o código por este:

Código:


    /*BOTÕES*/
    #quick_reply > div:nth-child(2) > input:nth-child(9):hover {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background: #427517 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0;
    border: 0;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
    white-space: nowrap; 
    }
    #quick_reply > div:nth-child(2) > input:nth-child(9) {
    -webkit-border-radius: 2px;
    background: #155D98 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0;
    border: 0;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
    white-space: nowrap;
    }
a.button1, a.button2, button.button2, input.button1, input.button2:hover {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background: #427517 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0!important;
    border: 0;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
    white-space: nowrap;
  font-weight: bold;
    }
a.button1, a.button2, button.button2, input.button1, input.button2 {
    -webkit-border-radius: 2px;
    background: #155D98 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0!important;
    border: 0;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
    white-space: nowrap;
  font-weight: bold;
    }
    .mainoption, .pun .frm .frm-buttons input, a.button2, body:last-child a.button1, input.button1, input[type="button"], input[type="submit"]:hover{
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background: #427517 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0!important;
    border: 0;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
    white-space: nowrap;
    }
    .mainoption, .pun .frm .frm-buttons input, a.button2, body:last-child a.button1, input.button1, input[type="button"], input[type="submit"]{
    -webkit-border-radius: 2px;
    background: #155D98 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0!important;
    border: 0;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
    white-space: nowrap; 
    }


O resultado será este:
https://i.servimg.com/u/f55/14/99/55/84/print18.jpg

- Não encontrei este botão inserir no qual apresentou com print.

- Qualquer coisa peço que post o seu CSS completo do seu fórum, para eu verificar.

Código:

/*MENU*/
.linklist.navlinks{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:none repeat scroll 0 0 #1775BD!important;border-color:#4CA0CE #155D98 #155D98;border-image:none;border-radius:0 0 6px 6px;border-right:1px solid #155D98;border-style:solid;border-width:1px;overflow:hidden}.linklist.navlinks a{color:#FFF;font-family:Verdana;font-size:12px;padding:3px 7px;text-shadow:1px 1px 0 #124B79}.linklist.navlinks a:hover{background:none repeat scroll 0 0 #155D98;box-shadow:0 0 4px #124B79 inset;color:none;outline:medium none;padding:5px 7px 6px}ul.navlinks {
  margin: -10px -10px 0!important;
}#page-header .navbar span.corners-top{display:none!important}
.navlinks {border-top: 1px solid #fff;}
/*-----------------------------------------------------*/
a{text-decoration:none!important}
.module .h3 {
text-align: center;
}
/*EDITOR*/
div.sceditor-grip {
display: none !important;
}
/*-----------------------------------------------------*/
 /*FUNDO PERFIL*/
.post {
    background-color: #E1EBF2!important;
}
/*EXIBIÇÃO BOTOES*/
.postbody {
  position: relative;
  padding-bottom: 65px;
}

.postbody ul.profile-icons {
  position: absolute;
  bottom: 0;
  right: 0;
}
/*QUOTE*/
blockquote,blockquote blockquote,blockquote blockquote blockquote{-moz-border-radius:5px;-moz-box-shadow:0 1px 5px rgba(0,0,0,.15);-webkit-border-radius:5px 5px;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.15);background:none;background-color:#F9F9F9;background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#F9F9F9),to(#F0F0F0));border:1px solid #DEDEDE;border-radius:5px 5px;box-shadow:0 1px 5px rgba(0,0,0,.15);padding:10px 20px}
/*MENU INTERATIVO*/

.drop-menu {
  background-color: #155d98;
  border: 1px solid #80c1e6;
  color: #ffffff;
  cursor: pointer;
  display: block;
    font-family: Tahoma;
  font-size: 16px;
  height: 25px;
  letter-spacing: -1px;
  margin: 0 auto;
  max-height: 25px;
  padding: 10px;
  position: relative;
  text-align: left;
  width: 310px;
  z-index: 999;
}
.plus {
  display: inline-block;
  font-family: Georgia;
  font-size: 16px;
  font-weight: bold;
  margin-right: 10px;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  -webkit-transition: .3s ease-in-out;
}
.drop-menu:hover {}
.drop-menu:hover .sub-menu {
  display: inline-block;
}
.drop-menu:hover .plus {
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.sub-menu {
  background-color: #155d98;
  background:image: -moz-linear-gradient(100% 100%  90deg, #000000, #155d98);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(#155d98));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF242F3A', EndColorStr='#FF000000');
  border: 1px solid #80c1e6;
  display: none;
  border-top: none;
  margin-left: -11px !important;
  margin-top: 5px;
  padding: 10px;
  width: 280px;
}
.sub-menu li {
  display: block;
  font-size: 16px;
  height: 22px;
  list-style-type: none;
  padding: 8px 0;
}
.sub-menu li img {
  margin-right: 10px;
  vertical-align: top;
}
.sub-menu li:hover {}
.sub-menu a {
  color: #ffffff;
  font-size: 16px;
  font-family: Tahoma
}
.sub-menu a:hover {
  color: #8fd55b;
}

/*REDONDAR CATEGORIAS*/
.forabg {
-moz-border-radius:10px;
-webkit-border-radius: 10px;
}
.forumbg {
-moz-border-radius:10px;
-webkit-border-radius: 10px;
}





.LGlike {
  background: #105289;
  padding: 3px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-shadow: -1px 0.5px #888;
  box-shadow: 1px 1px 1px #888;
  cursor: pointer;
  margin-right: 4px;
 }
 .LGvote { margin: 0 5px; }
 .LGnovote {
  filter:Alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
  text-shadow: none;
 }






/*CURTIR*/
.post_feature_box {
-moz-box-shadow: rgba(0,0,0,0.1) 0 1px 5px;
-webkit-box-shadow: rgba(0,0,0,0.1) 0 1px 5px;
background-color: #dfedd1;
background-image: linear-gradient(tobottom,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%);
border: 1px solid #accf8b;
box-shadow: rgba(0,0,0,0.1) 0 1px 5px;
color: #3a6a16;
font-size: 11.4px;
line-height: 180%;
margin-top: 5px;
max-width: 100%;
min-height: 60px;
padding: 8px;
word-wrap: break-word;
}

.ipsUserPhoto {
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
background: #fff;
border: 1px solid #d5d5d5;
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
float: left;
margin-right: 8px;
padding: 1px;
}

.ipsUserPhoto img {
height: 50px;
width: 50px;
}




/*BOTÕES*/
#quick_reply > div:nth-child(2) > input:nth-child(9):hover {
 -moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #427517 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0;
border: 0;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
white-space: nowrap; 
}
#quick_reply > div:nth-child(2) > input:nth-child(9) {
-webkit-border-radius: 2px;
background: #155D98 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0;
border: 0;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
white-space: nowrap;
}
a.button1, a.button2, button.button2, input.button1, input.button2:hover {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #427517 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0!important;
border: 0;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
white-space: nowrap;
  font-weight: bold;
}
a.button1, a.button2, button.button2, input.button1, input.button2 {
-webkit-border-radius: 2px;
background: #155D98 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0!important;
border: 0;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
white-space: nowrap;
  font-weight: bold;
}
.mainoption, .pun .frm .frm-buttons input, a.button2, body:last-child a.button1, input.button1, input[type="button"], input[type="submit"]:hover{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #427517 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0!important;
border: 0;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
white-space: nowrap;
}
.mainoption, .pun .frm .frm-buttons input, a.button2, body:last-child a.button1, input.button1, input[type="button"], input[type="submit"]{
-webkit-border-radius: 2px;
background: #155D98 url(http://i1327.photobucket.com/albums/u661/quanligerv/animate33x/highlight_faint.png) repeat-x 0 0!important;
border: 0;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
white-space: nowrap; 
}

Pelo mozila que o sr visualizou?


Não encontrei este botão inserir no qual apresentou com print.

- Fica dentro da caixa bbcode.

Quando você clica em pré-visualizar a mensagem, os botões "pré-visualizar e enviar" também ficam com o erro da imagem com a escrita embaixo.

Eu estou visualizando com o chorme e com o Opera e ambos apresentam estes erros.