A Pen by Andreas Storm on CodePen.
Created
October 20, 2019 23:53
-
-
Save CodeMyUI/7ee737283b7eef6075b57275e84cb327 to your computer and use it in GitHub Desktop.
Input Radio
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="cntr"> | |
<label for="rdo-1" class="btn-radio"> | |
<input type="radio" id="rdo-1" name="radio-grp"> | |
<svg width="20px" height="20px" viewBox="0 0 20 20"> | |
<circle cx="10" cy="10" r="9"></circle> | |
<path d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z" class="inner"></path> | |
<path d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z" class="outer"></path> | |
</svg> | |
<span>Option One</span> | |
</label> | |
<label for="rdo-2" class="btn-radio"> | |
<input type="radio" id="rdo-2" name="radio-grp"> | |
<svg width="20px" height="20px" viewBox="0 0 20 20"> | |
<circle cx="10" cy="10" r="9"></circle> | |
<path d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z" class="inner"></path> | |
<path d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z" class="outer"></path> | |
</svg> | |
<span>Option Two</span> | |
</label> | |
<label for="rdo-3" class="btn-radio"> | |
<input type="radio" id="rdo-3" name="radio-grp"> | |
<svg width="20px" height="20px" viewBox="0 0 20 20"> | |
<circle cx="10" cy="10" r="9"></circle> | |
<path d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z" class="inner"></path> | |
<path d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z" class="outer"></path> | |
</svg> | |
<span>Option Three</span> | |
</label> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body | |
height: 100% | |
display: grid | |
body | |
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif | |
font-weight: 400 | |
-webkit-font-smoothing: antialiased | |
color: #222 | |
.cntr | |
margin: auto | |
.btn-radio | |
cursor: pointer | |
display: inline-block | |
float: left | |
-webkit-user-select: none | |
user-select: none | |
&:not(:first-child) | |
margin-left: 20px | |
@media screen and (max-width: 480px) | |
display: block | |
float: none | |
&:not(:first-child) | |
margin-left: 0 | |
margin-top: 15px | |
svg | |
fill: none | |
vertical-align: middle | |
circle | |
stroke-width: 2 | |
stroke: #C8CCD4 | |
path | |
stroke: #008FFF | |
&.inner | |
stroke-width: 6 | |
stroke-dasharray: 19 | |
stroke-dashoffset: 19 | |
&.outer | |
stroke-width: 2 | |
stroke-dasharray: 57 | |
stroke-dashoffset: 57 | |
input | |
display: none | |
&:checked + svg | |
path | |
transition: all .4s ease | |
&.inner | |
stroke-dashoffset: 38 | |
transition-delay: .3s | |
&.outer | |
stroke-dashoffset: 0 | |
span | |
display: inline-block | |
vertical-align: middle |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment