:focus on class doesn't work - html

Question

I want the class to appear a different color after selected. Why does it just go back to the non active color? what can I do so that it stays focused on my class?
I tried many things on this forum but nothing seems to work. I need it for school really quickly.
.Auswahl {
outline: none;
background-color: #F6F6F6;
border: none;
margin-right: -4px;
float: left;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.Auswahl:hover {
background-color: #FF0004;
}
.Auswahl:active {
background-color: #00FF2B;
}
.Auswahl:focus {
background-color: #7100FF;
}
<div class="Auswahl">
<h1>Sparkasse</h1>
<br>Vorteile
<br>Nachteile
</div>

Answer 1

The :focus pseudo-class applies while an element has the focus
(accepts keyboard events or other forms of text input).
More info here
Change your HTML like this:
.Auswahl {
outline: none;
background-color: #F6F6F6;
border: none;
margin-right: -4px;
float: left;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.Auswahl:hover {
background-color: #FF0004;
}
.Auswahl:focus {
background-color: #7100FF;
}
.Auswahl:active {
background-color: #00FF2B;
}
<button class="Auswahl">
<h1>Sparkasse</h1>
<br>Vorteile
<br>Nachteile
</button>

Answer 2

Try this. It's got a very small amount of jQuery to add a new class on click.
HTML
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<div class="Auswahl">
<h1>Sparkasse</h1>
<br>Vorteile
<br>Nachteile
</div>
CSS
.Auswahl {
outline: none;
background-color: #F6F6F6;
border: none;
margin-right: -4px;
float: left;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.Auswahl:hover {
background-color: #FF0004;
}
.Auswahl:active {
background-color: #00FF2B;
}
.Auswahl:focus {
background-color: #7100FF;
}
.newClass {
background-color: #7100FF;
}
JQUERY
$(".Auswahl").click(function(){
$(this).addClass('newClass');
});
Here's a Codepen example too: EXAMPLE HERE