custom pure CSS radio button

In vielen Projekten gibt es immer wieder die Anforderung nach gestylten hübschen Radio-Buttons – Auftrag: »für den Nutzer der Webseite ein Augenschmaus«. Im Netz gibt es dafür viele unterschiedliche Lösungsansätze. Einen pure CSS Ansatz setze ich hierfür gerne ein. Mithilfe von Animationen ist das Auswählen der Werte Butterweich und schmeichelt den Augen zusätzlich.

Die Stylinganweisungen sind in SCSS geschrieben, um den Code etwas kürzer zu halten. Mithilfe der Variablen können die Farbwerte ganz fix angepasst werden. Alte Browser, die die Stylings nicht verstehen, nutzen als Fallback das Standardstyling von Radio-Buttons. Daher ist keinerlei Fingerspitzengefühl in der Verwendung der Stylings notwendig und wir haben nichts zu verlieren.

Use it!

See the Pen Custom radio button pure CSS by Andy (@blacklightdesign) on CodePen.