[Tutorial] Como adicionar imagem em button

Olá galerinha do TibiaKing!

Hoje trago para vocês um tutorial bem simples e muito útil para quem gosta de detalhes...

Como o titulo já diz, vou mostrar como adicionar uma imagem como button.

Bom, sem mais delongas vamos para o tutorial.

Arquivos usados:

Vamos utilizar o modern.css, em outros é mais conhecido como style.css, style1.css e etc.. e também o index.tpl.

dentro do modern.css/ou style.css, vou adicionar o seguinte:

obs: vamos utilizar duas imagem, uma para o mouse on, e outra para o mouse off, vou deixar uma demonstração de como fica após feito isso.

Pra usar a imagem com o mouse OFF vamos usar:

.menu_nav input.loginbutton {
    background-color: transparent;
    background-image: url(../images/img/playnowbutton.png);
    background-repeat: no-repeat;
    height: 36px;
    width: 119px;
}

Explicação:

 background-color: transparent;

É para adicinar um cor de fundo ao button.

background-image:

É o diretório da imagem.

background-repeat: no-repeat;

Esse é muito útil, serve para não repetir a imagem.

 height: 36px;
 width: 119px;

São as dimenções.

----------///---------////-----------

Para mostrar a imagem com o mouse ON vamos usar:

.menu_nav input.loginbutton:hover {
    background-image: url(../images/img/playnowbutton_hover.png);
}

No meu index.tpl vou adicionar o seguinte:

   <center>
               <input type="Submit" class="loginbutton" value="">
            </center>

Explicação:

loginbutton é onde a imagem está hospedada. 

Enfim galera, é só isso, espero que gostem!

Segue agora algumas imagens de como ficou:

Imagem mouse ON.

Imagem mouse OFF.

Editado Dezembro 3, 2020 4 anos por Nysman (veja o histórico de edições)