1
resposta

Posso colocar texto sobre imagem em um botão?

Se eu uso a tag background no css o meu botão nao usa a imagem de fundo;

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="FONTES/fipps/Fipps-Regular.otf">

    <style>
        @font-face {
         font-family: myFirstFont;
         src: url(FONTES/fipps/Fipps-Regular.otf);
        }

        .botao {
            background-color: transparent;
            background-image: url(img/buttonPdrao.png);
            font-family: 'myFirstFont';
        }
    </style>
</head>
<body>

    <button class="botao">Play</button>

</body>
# </html>

Se eu uso a imagem de background diretamante na teg button eu nao concigo centralizar o texto na imagem

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="FONTES/fipps/Fipps-Regular.otf">

    <style>
        @font-face {
         font-family: myFirstFont;
         src: url(FONTES/fipps/Fipps-Regular.otf);
        }

        .botao {
            background-color: transparent;
            font-family: 'myFirstFont';
        }
    </style>
</head>
<body>

    <button class="botao"><img src="img/buttonPdrao.png" alt=""> Play</button>

</body>
</html>

Como eu centralizo meu texto na imagem? Imagem do botão

1 resposta

Olá Samuel, tudo bem?

Primeiramente, fiz o teste com seu código aqui nesse codepen, utilizando uma imagem como background e deu certo! A imagem está aparecendo e o texto centralizado. Porém, adicionei outras propriedades relacionadas ao background e aumentei altura e largura para visualizar melhor. Se quiser, você pode subir a imagem que utilizou por meio desse site e me enviar o link para que eu possa testar com ela e visualizar melhor o que pode estar ocorrendo.

Neste caso, seria boa prática utilizar como plano de fundo mesmo ao invés da tag img, visto que se utilizarmos a imagem na tag, será necessário utilizar a propriedade position para colocar essa imagem atrás do texto (ou seja, atuando como um plano de fundo) e o texto flutuando acima dela. Então o ideal é seguir a linha de pensamento com o background-image.

Fico no aguardo para mais informações, abraços!