Button Label Toggle via CSS

In letzter Zeit hatte ich oft den Fall, dass ein Button im aktiven Status seine Aufschrift verändern soll. Über die Zeit hat sich aus einem ursprünglich etwas ungelenken Script, mit Hilfe des :not() Selectors, ein schlankes CSS-Snippet entwickelt.

CSS

.btn:not(.active) > .btn-label-active,
.btn.active > .btn-label-default {
	display: none;
}

HTML

<button class="btn btn-lg btn-default">
	<span class="btn-label-default">Default</span>
	<span class="btn-label-active">Active</span>
	state
</button>

Über das Togglen einer .active Klasse auf den Button wird die Anzeige gesteuert. So wird immer entweder der Inhalt aus dem span.btn-label-default oder dem span.btn-label-active dargestellt.

Demo