Using a Bootstrap's button as navbar link (a list item)

Hello guys! First of all let me thank you for making a pretty good work with this theme, is very nice :-)

I have a question about it:

I’m having problems to put a button with its Bootstrap’s 4 classes as a header/navbar link. Is this possible? I need that it can be shown nice in all resolutions (normal navbar, sticky and mobile).

I have attached a file showing my try. This is the code that I have used:

CSS:

.refnavlink {
  margin-top: 32px;
  margin-bottom: 8px;
  padding: 4px !important;
}

MARKUP:

ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1500">
          <li><a href="#" data-href="#wrapper"><div>Inicio</div></a></li>
          <li><a href="#" data-href="#acerca-de"><div>Oportunidad</div></a></li>
          <li><a href="#" data-href="#preguntas-frecuentes"><div>Preguntas frecuentes</div></a></li>
          <li><a href="http://domain.com/" target="_blank" class="btn btn-success refnavlink"><strong>Afiliarse</strong></a></li>
          <li><a href="#" data-href="#contactanos"><div>Contacto</div></a></li>
        </ul>

I will await your answer, thank you so much and please forgive my bad English :-(

All the best.