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">
          
- [Inicio](#wrapper)
          
- [Oportunidad](#acerca-de)
          
- [Preguntas frecuentes](#preguntas-frecuentes)
          
- [Afiliarse](http://domain.com/)
          
- [Contacto](#contactanos)
        

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

All the best.