Bouton transparent, extensible, arrondis ... avec icone!

Comme le résume le titre du topic j'ai un bouton assez complexe à créer, le problème en image:



Il s'agit donc de réaliser un bouton html + css, dont le bg contient de la transparence, dont le texte est en html [et donc le contenu est extensible], avec une icône, le tout cliquable évidement.
Et comme c'était pas encore assez compliqué, mon patron très méticuleux, désire un code html super clean [pas de "+" en img dans l'html évidement].
J'ai trouvé des dizaines de pages sur la création de boutons mais aucune n'associait les qualités exigées [soit un bg opaque, soit le texte en image, ...] et je ne suis jamais arrivée à un résultat concluant, je me questionne donc sur la meilleure façon de faire et j'espère sincèrement que quelqu'un aura une piste à me donner car je suis à court d'idée.

Merci

Bonjour,

sous le texte un fond extensible en largeur --> deux images de fond, classique
au-dessus un picto transparent --> le picto en image de fond centré (50% 0 ou bien center top)
Ça fait la bagatelle de 3 éléments, comme par exemple span dans span dans <a>
Pour le + il peut faire partie de l'image de fond bord arrondi droit, vu que ça fait doublon avec le mot 'Add' à moins que la couleur ne doive être modifiable auquel cas on peut encore tenter de le rajouter en CSS avec :after et content parce que décidément il est là en déco et n'apporte rien à la compréhension du titre