Skip to content

Instantly share code, notes, and snippets.

@plugn

plugn/css-custom-radio-button-ui-design.markdown

Created September 13, 2022 22:15
Show Gist options
  • Save plugn/111cd758f1d2b81c323bd5e624b8f3cb to your computer and use it in GitHub Desktop.
Save plugn/111cd758f1d2b81c323bd5e624b8f3cb to your computer and use it in GitHub Desktop.
Download ZIP
CSS Custom Radio Button UI Design
Raw
index.html
<body>
<label><input type="radio" name="btn" checked></label>
<label><input type="radio" name="btn"></label>
</body>
Raw
style.css
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #111;
flex-direction: column;
}
input[type="radio"] {
position: relative;
width: 120px;
height: 40px;
margin: 10px;
outline: none;
background: #111;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
cursor: pointer;
border-radius: 20px;
box-shadow: -5px -5px 20px rgba(255, 255, 255, 0.1),
5px 5px 10px rgba(0, 0, 0, 1),
inset -2px -2px 5px rgba(255, 255, 255, 0.1),
inset 2px 2px 5px rgba(0, 0, 0, 0.5),
0 0 0 2px #1f1f1f;
transition: 0.5s;
}
input[type="radio"]:checked {
background: #20b7ff;
}
input[type="radio"]::before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 82px;
height: 42px;
background: linear-gradient(to top, #000, #555);
border-radius: 20px;
box-shadow: 0 0 0 1px #232323;
transform: scale(0.98,0.96);
transition: 0.5s;
}
input[type="radio"]:checked::before {
left: 40px;
}
input[type="radio"]::after {
content: '';
position: absolute;
left: 60px;
top: calc(50% - 4px);
width: 8px;
height: 8px;
border-radius: 50%;
background: #555;
transition: 0.5s;
}
input[type="radio"]:checked::after {
left: calc(60px + 40px);
background: #63cdff;
box-shadow: 0 0 5px #63cdff,
0 0 15px #63cdff,
0 0 30px #63cdff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment