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?