Hoe kan ik Text in knoppen en de knoppen zelf responsive maken?

Hallo,

Ik heb een bootstrap (responsive) website gemaakt alleen loop tegen probleempje aan.
Ik heb onderstaande html code:
<a href="links\voetbal.pdf" TARGET="_blank" class="btn btn-light-handleidingen">voetbal</a>
<a href="links\tennis.pdf" TARGET="_blank" class="btn btn-light-handleidingen">tennis</a>

en css code:
.btn-light-handleidingen {
width:85%;
margin:2px 30px;
border-radius: 5px;
border-color:white;
color:white ;
#background-color: rgb(255,255,255);
}

.btn-light-handleidingen:hover,
.btn-light-handleidingen:focus,
.btn-light-handleidingen:active {
border-radius: 5px;
color: grey;
background-color: rgba(270,255,280,0.8);
}

Het zijn dus eigenlijk soort brede (85%) knoppen onder elkaar, maar als ik mijn internetscherm versmal (responsive maak) dan schuift veel text op mijn website onder elkaar om zo toch volledig in beeld
te blijven ondanks dat het scherm smaller wordt. Dat is goed.
De knoppen versmallen ook netjes mee, alleen de tekst erbinnen gaat op een gegeven moment uit de knop steken en is niet meer leesbaar (omdat mijn text wit is).
De knop krijgt tijdens de versmalling niet automatisch meer hoogte zodat de text erbinnen blijft en dus ook binnen de versmalde weergave blijft.

Kan dit wel? En hoe dan?

Je zou met Viewport kunnen spelen vanaf een bepaalde breedte.
Bekijk dit even en verder op de pagina staat een .gif plaatje wat precies laat zien wat het effect is

Hi, er staat een selector #background-color binnen de selector .btn-light-handleidingen ?? Ik denk dat het # daar niet hoort.

Aanvulling. Heb je hier misschien iets aan?

Suc6. Have fun.

Hallo beide,
Dank voor jullie hulp.
De bovenstaande code heb ik toegevoegd aan mijn css en het werkt nu uitstekend! De knoppen en text schalen mee.
Weten jullie toevallig ook als ik mijn bootstrap responsive site start op internet explorer dan krijg ik een active X melding. Deze moet ik activeren anders doet mijn uitklapbaar menu het niet. Het menu zit achter 1 knop op elke pagina en komt tevoorschijn als je op de knop drukt, maar zonder activeX doet hij het niet. De site heb ik wel nog niet online staan. Misschien dat dat wat uitmaakt.

Het mag in principe niet uitmaken of een website op je pc of op internet staat. Een pagina hoort altijd te werken!
// Noot: Er zijn situaties waarbij dit niet helemaal lukt, bijvoorbeeld als een script het toplevel domein (.nl) uit de url probeert te halen, dat zal lokaal niet lukken.

In jouw situatie is er waarschijnlijk een script voor het menu die een ActiveX nodig heeft in IE. Dit is geen elegante oplossing. Misschien een ander menu? Mobile menu zonder scripts als voorbeeld

Suc6. Have fun.

Dan moet ik mijn hele menu veranderen, jakkes. Ik heb nog even op de site gekeken van Bootstrap waar ik de code vandaan gedownload heb en dan krijg ik de melding niet (in IE)
http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/

Dus ik ga eerst proberen hem online te brengen en kijken wat er gebeurt.
Dank je iig