php/css/html language buttons current language

Question

I have "buttons", which change language on the web-page:

<div class="wrapper">
    <a class="button-link" href= "<?php echo qtrans_convertURL(get_permalink(), 'de'); ?>" target="_parent">DE</a>
    <a class="button-link" href="<?php echo qtrans_convertURL(get_permalink(), 'en'); ?>" target="_parent">EN</a>
</div>

And I make a hover effect, to show, which language is about to be chosen:

.button-link:hover {
    color: #fff;
    border-bottom: 2px solid #e95252;
}

Now I am trying to keep this border line under the chosen language. So that the user always sees the active language. I thought it would be as simple as:

.button-link:active{}

But it doesn't work the way I want it, so I guess I have to write a php function. I have found examples of how to show the current page, but it is not the same as with the languages. Because the language button is independent of the page, it should always stay underlined if a person has chosen English, for example.

Answer 1

One way of doing this, would be to add a class="<?= $lang = 'de' ? 'active' : '' ?>" to every .button-link. Since they are all doing the same it would be simpler:

<?php
    $langs = array('de', 'fr', 'it', 'en');
?>

<div class="wrapper">
    <?php foreach ($langs as $lang) : ?>
        <a class="button-link" href="<?= qtrans_convertURL(get_permalink(), $lang); ?>" class="<?= qtrans_getLanguage() == $lang ? 'active-lang' : '' ?>" target="_parent"><?= strtoupper($lang); ?></a>
    <?php endforeach; ?>
</div>

and in css you would simply select the class either as

.active-lang {}

or

.button-link.active-lang {}