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.