Boutons sous la bannière revisité

Je crois avoir trouvé la bonne façon pour que le titre du bouton apparaisse

Dans un gadget HTML

HTML

<div class="Bouton"><a href="https://huguette2307.blogspot.com"  style= "color: black;">partage</a></div>

<div class="Bouton"><a href="https://huguette2307.blogspot.com" style= "color: black;">Design de blogs</a></div>

<div class="Bouton"><a href="https://huguette-au-fil-des-saisons.blogspot.com" style= "color: black;">Au fil des Saisons</a></div>

<div class="Bouton"><a href="https://huguette2.blogspot.com" style= "color: black;">Animations HTML5</a></div>

Dans le CSS

.Bouton {

    background-image: url(https://zupimages.net/up/26/09/p8xp.png);

    background-repeat: no-repeat;

    background-position: center top;

display: inline-block; 

    font-size: 12px;

    font-weight: bold;    color: black;

    padding-left:5px; padding-top: 40px;

width: 200px; height: 30px;

    margin: 5px 5px;

line-height: 10px;

    text-align: center;

}

j'espère avoir pu vous aider un peu, bonne soirée, bisous

Boutons sous la bannière

 

Disons que j'ai pris des codes un peu partout pour faire le mien

Dans un gadget HTML 

le code que j'ai pris

<div id='barre_nav'> <ul>

<li><a title="Bonjour Paris" href="https://demo-design-1.blogspot.com"><img src="https://zupimages.net/up/25/24/rxbm.png" /></a></li>

chaque lien que vous ajoutez ça doit commencer par <li> et se terminer par </a></li>

Quand vous avez terminé en bas ça devrait être

</ul></div>

*****************************

Ensuite dans le CSS mon code

/*boutons entête*/

#barre_nav ul li a{

list-style-type: none;

display:inline;

margin:-2px;

padding:10px;

border:0px solid;

}

De cette façon vous n'êtes pas obligé de jouer dans le HTML du blog

Je n'ai pas trouvé comment mettre le nom sur le bouton alors

je l'ai mis dans mon PSP pour chaque bouton.

Si vous avez des questions à ce sujet, j'essaierai d'y répondre, mais je débute avec les boutons.