Flat radio buttons
How do I make an flat radio buttons?
Http://designitcodeit.com. What is a flat radio buttons? How do you make a flat radio buttons? This script and codes were developed by Kasper Mikiewicz on 21 November 2022, Monday.
Flat radio buttons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat radio buttons</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { background: #26292c; color: #f8f8f8; font: 300 1em/1.5 "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
}
body { margin: 10em 1em; text-align: center;
}
/** %[Object] Radio buttons */
/*------------------------------------*/
@keyframes pulse { 0% { width: .7em; height: .7em; margin: .4em; } 50% { width: 1.1em; height: 1.1em; margin: .2em; } 100% { width: .9em; height: .9em; margin: .3em; }
}
.radio { color: #798188; cursor: pointer; margin-left: .5em; display: inline-block;
}
.radio,
.radio span:before { transition: .25s ease;
}
.radio span { width: 1.5em; height: 1.5em; margin-right: .5em; border-radius: 3em; background: #202325; vertical-align: top; display: inline-block;
}
.radio span:before { content: ''; width: .7em; height: .7em; margin: .4em; border-radius: 3em; display: inline-block; background-color: rgba(0,0,0,0);
}
.radio:hover span:before { background-color: rgba(255,255,255, .9);
}
/*------------------------------------*/
input[type="radio"]:checked + .radio { color: #f8f8f8;
}
input[type="radio"]:checked + .radio span:before { background-color: #9fd86b; width: .9em; height: .9em; margin: .3em; animation: pulse .25s;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <label>Is this cool?</label>
<input type="radio" name="budget" id="r1" value="hell yeah" checked hidden>
<label for="r1" class="radio"><span></span>hell yeah</label>
<input type="radio" name="budget" id="r2" value="a little" hidden>
<label for="r2" class="radio"><span></span>a little</label>
<input type="radio" name="budget" id="r3" value="nope" hidden>
<label for="r3" class="radio"><span></span>nope</label> <script src="js/index.js"></script>
</body>
</html>
Flat radio buttons - Script Codes CSS Codes
html { background: #26292c; color: #f8f8f8; font: 300 1em/1.5 "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
}
body { margin: 10em 1em; text-align: center;
}
/** %[Object] Radio buttons */
/*------------------------------------*/
@keyframes pulse { 0% { width: .7em; height: .7em; margin: .4em; } 50% { width: 1.1em; height: 1.1em; margin: .2em; } 100% { width: .9em; height: .9em; margin: .3em; }
}
.radio { color: #798188; cursor: pointer; margin-left: .5em; display: inline-block;
}
.radio,
.radio span:before { transition: .25s ease;
}
.radio span { width: 1.5em; height: 1.5em; margin-right: .5em; border-radius: 3em; background: #202325; vertical-align: top; display: inline-block;
}
.radio span:before { content: ''; width: .7em; height: .7em; margin: .4em; border-radius: 3em; display: inline-block; background-color: rgba(0,0,0,0);
}
.radio:hover span:before { background-color: rgba(255,255,255, .9);
}
/*------------------------------------*/
input[type="radio"]:checked + .radio { color: #f8f8f8;
}
input[type="radio"]:checked + .radio span:before { background-color: #9fd86b; width: .9em; height: .9em; margin: .3em; animation: pulse .25s;
}
Flat radio buttons - Script Codes JS Codes
/* More freebies on: * http://designitcodeit.com */
Developer | Kasper Mikiewicz |
Username | Idered |
Uploaded | November 21, 2022 |
Rating | 3 |
Size | 2,759 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Universal focus, hover, active state for buttons | 2,439 Kb |
A Pen by Kasper Mikiewicz | 2,950 Kb |
Dropdown menu | 3,350 Kb |
Pagination | 3,868 Kb |
Comments thread | 3,601 Kb |
Hello bar | 3,237 Kb |
Notifications | 3,250 Kb |
Flat switch | 2,555 Kb |
Love button | 3,597 Kb |
Pure CSS modal box | 3,364 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Content Changer | Cliffpyles | 4,538 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
Find The Penguin | Lelder | 2,212 Kb |
Sort the Knowlege | Eprouver | 3,915 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Mostly Fluid | Mccreath | 3,308 Kb |
Sticky div | Kaslab | 2,225 Kb |
Flip test | Madhes | 1,635 Kb |
Realistic Buttons | Stoypenny | 2,248 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!