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

Modifier la forme des images

 Je te mets les lien, amuses-toi

Chez Sorcière Corbeau

https://les-astuces-blogger.blogspot.com/p/des-formes-arrondies-au-survol-de-vos.html

https://9elements.github.io/fancy-border-radius/#75.51.78.48--.

cadre arrondi s'efface au passage de la souris dans les coins

Css pris chez Sorière Corbeau

====== Style de noyau a rectangle == ====

.post-body img {

background:#FFF; /* Couleur d'arrière-plan autour de l'image * /

padding:15px; /* L'espace entre la bordure et l'image */

border-radius: 50% 0; /* Bordure arrondie */

box-shadow: 0px 0px 15px #000; /* Ombre */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

.post-body img:hover {

border-radius:0; /* Suppr. l'arrondi de la bordure (valeur 0) */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

cursor:pointer;

}

Bonne journée