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