WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

How To Hack a Formular: Radio Button hacken leicht gemacht (Nur CSS und HTML) [Anleitung / Tutorial]

von | Okt 5, 2019 | Allgemein | 0 Kommentare

Schlagwörter: CSS - Tutorial

Im heutigen Tutorial zeige ich euch, wie man ein Formular hacken kann. Ja wir machen aus einem langweiligen normalen Formular ein cooles Formular und zwar konzentrieren wir uns diesmal auf den Radiobutton. Ein Radio Button verwendet man ja, wenn man etwas zur Auswahl hat und kein Drop/Down Feld machen möchte. Aber meistens sieht dieser Punkt einfach langweilig aus.

Heute zeige ich euch, wie man so ein Punkt aufpimpen kann und in ein cooler Schalter Effekt umwandeln kann.

Video / Anleitung

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
        input[type="radio"]{
            -webkit-appearance:none;
        }
        label {
            height: 180px;
            width: 240px;
            border: 6px solid #18f98d;
            position: relative;
            margin: auto;
            border-radius: 10px;
            color: #18f98d;
            transition: 0.5s;
 
        }
        .fab {
            font-size: 80px;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-80%);
        }
        label>span{
            font-size: 25px;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,80%);
            font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
            font-weight: 500;
            }
        input[type="radio"]:checked + label {
            background-color: #18f98d;
            color: white;
            box-shadow: 0 15px 45px rgba(24,249,141,0.2);
        }

HTML

1
2
3
4
5
6
7
8
9
10
11
 <input type="radio" name="device" id="android">
    <label for="android">
        <i class="fab fa-android"></i>
        <span>Android</span>
    </label>
 
    <input type="radio" name="device" id="ios">
    <label for="ios">
        <i class="fab fa-apple"></i>
        <span>iOS</span>
    </label>




0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert