SAPUI5 custom button control based on SAPUI5 button

Question

I would like to build a custom button with. The reason for this is because I reuse this button a lot of time.
- It has two style classes.
- The button should extend the SAPUI5 button.
- Uses the jQuery append() function.
How I built my button up to now:
this.btnMyTeam = new sap.ui.commons.Button({
  text : "My Team" + "\n\n" + LanguageEntityAdapter.getInstance().getTextForLabelname("APP_NAME_MYTEAM")+"\n\n\n\n\n",
  press : function() {
  oController.onMyTeamButton();
  this.btnMyTeam.addStyleClass("StartScreenButton MyTeamImage");
//in the onAfterRendering function of the controller
this.btnMyTeam.$().append(
  "<span style=\"color: #8DA3D3 !important; font-size: 25px;\">" + this.getNumberOfDays() + "</span><span>\n\n"  + LanguageEntityAdapter.getInstance().getTextForLabelname("MY_TIME_CORRECTION_ISSUES") + "</span>");
This is not a nice way !!!
So I would like to extend the sap-ui.commons.button. And tried like this. but no success at all.
sap.ui.commons.Button.extend("StartScreenButton", {
  metadata : {
  properties : {
  upperText : {type : "string"},
  htmlAppend1 : {type : "string"},
  htmlAppend2 : {type : "string"},
  upperText : {type : "string"},
  backgroundImgStyleClass : {type : "string"},
  events : {
  onPress : {
  init : function() {
  this.innerButton = new sap.ui.commons.Button({
  text:this.upperText,
  this.innerButton.addStyleClass(this.backgroundImgStyleClass);
  this.innerButton.addStyleClass("StartScreenButton");
  onAfterRendering : function() {
  this.append("");
  renderer : {
  render : function(oRm, oControl){
  oRm.renderControl(oControl);
  oRm.renderControl(this.innerButton);

Answer 1

Hi Dominik,
maybe you can use the following example as an orientation.
Regards
Michael