Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Forms and Inputs >> Pure CSS3 Radio Buttons


Code Snippet </> Info


Snippet Name: Pure CSS3 Radio Buttons

Description: Add pure CSS3 radio buttons that look awesome to your web page.
Example: View Code Demo

Note:

Author: Yair Even-Or

Last Modified: 2015-08-26 22:31:10

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!doctype html> <html> <head> <title>Pure HTML5 CSS3 Radio Buttons</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style> /* Begin Pure HTML5 CSS3 Radio Buttons */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Yair Even-Or : http://dropthebit.com/ : Creative Commons License == */ /* EFFECT */ label {position:relative; padding-left:32px; cursor:pointer; transition:0.2s;} label:hover {color:#FFF; } label::before, label::after{ content:''; position:absolute; top:50%; margin-top:-11px; left:0; width:22px; height:22px; border-radius:20px;} label::before {box-shadow:0 1px 0 rgba(255,255,255,0.25), 0 2px 5px 6px rgba(0,0,0,0.5) inset;} label::after {background:#79EAC5; opacity:.2; -webkit-transform:scale(0); transform:scale(0); transition:0.3s;} label:hover::after {-webkit-transform:scale(0.6); transform:scale(0.6); opacity:1; transition:0.2s;} input:checked + label::after {-webkit-transform:scale(0.7); transform:scale(0.8); opacity:1; box-shadow:0 0 15px -1px #79EAC5;} /* PAGE RESET */ @font-face { font-family:'Roboto Condensed'; font-style:normal; font-weight:400; src:local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url(http://themes.googleusercontent.com/static/fonts/robotocondensed/v7/Zd2E9abXLFGSr9G3YK2MsFzqCfRpIA3W6ypxnPISCPA.woff) format('woff'); } html {height:100%;} body { height:100%; text-align:center; font:1.5em 'Roboto Condensed', arial; background-image:-webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); background-image:-moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); background-image:-o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); background-image:radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); color:#79EAC5; text-shadow:0px 1px 1px rgba(0,0,0,0.2); } *{margin:0; padding:0;} fieldset {display:inline-block; color:rgba(255,255,255,0.6); padding:30px 60px 50px; border:4px solid rgba(0,0,0,0.2); box-shadow:0 1px 0 rgba(255,255,255,0.1), 0 -160px 50px -80px rgba(0,0,0,0.1) inset; border-radius:20px; margin:50px auto; text-shadow:1px 3px 1px rgba(0,0,0,0.3);} legend {padding:0 20px; dislpay:inline-block; color:#79EAC5; text-transform:uppercase;} fieldset label {margin:0 20px;} </style> </head> <body> <div id="content"> <h3>Pure CSS3 Radio Buttons</h3> <br /> <p>Hover your mouse over the radio buttons to show the effect.</p> <br /> <fieldset class='radioGroup'> <legend>Cool radio buttons:</legend> <input id='g1o1' name="group1" value="option1" hidden type="radio"> <label for='g1o1'>Heck yeah</label> <input id='g1o2' name="group1" value="option2" hidden type="radio"> <label for='g1o2'>A little</label> <input id='g1o3' name="group1" value="option3" hidden type="radio"> <label for='g1o3'>Nope</label> </fieldset> <br /><br /> <div id="link"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_215.html">Pure HTML5 CSS3 Radio Buttons Code Snippet</a> page. ] </div> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library