Проблема с компоновкой гиперссылки Bootstrap

Question

Я бы хотел использовать bootstrap toggle-switch, чтобы пользователи моего сайта переключали языки. Проблема в том, что когда я помещаю ссылку для каждого дна, они теперь выглядят как две отдельные кнопки и больше не похожи на исходный переключатель. В чем проблема?

https://jsfiddle.net/ctap672a/2/

<div class="btn-group btn-toggle float-right"> 
    <button class="btn btn-default">FRANCAIS</button> 
    <button class="btn btn-primary active">ENGLISH</button> 
</div> 

Со ссылками:

<div class="btn-group btn-toggle float-right"> 
    <a href="index-fr.html"><button class="btn btn-default">FRANCAIS</button></a> 
    <a href="index-en.html"><button class="btn btn-primary active">ENGLISH</button></a> 
</div> 

Answer 1

Вы можете изменить свой HTML, чтобы использовать только якорный тег с классами кнопки, как это:

<div class="btn-group btn-toggle float-right"> 
    <a href="index-fr.html" class="btn btn-default">FRANCAIS</a> 
    <a href="index-en.html" class="btn btn-primary active">ENGLISH</a> 
</div>