Estoy personalizando el menú principal de SharePoint en línea y, para hacerlo, agregué este JavaScript para agregar un botón al final de los elementos del menú:

 var e = document.createElement('div'); e.classList.add('ms-HorizontalNavItem'); e.innerHTML = "<a data-automation-id='button-web-part' href='https://***/' target='_blank' class='ms-Button ms-Button--primary root-251' data-is-focusable='true' style='background-Color:green;color:while'><span class='ms-Button-flexContainer flexContainer-252' data-automationid='splitbuttonprimary'><span class='ms-Button-textContainer textContainer-253'><span style='color:while'>Shop me some</span></span></span></a>"; var ele = document.querySelectorAll('[role="menubar"]'); ele[0].appendChild(e);

ahora el resultado que obtuve será el siguiente: -

pero quiero que el elemento/botón sea como sigue, más grande con esquinas redondeadas:-

¿algún consejo?