Skip to content

Instantly share code, notes, and snippets.

@vigikaran

vigikaran/Image Radio Button CSS 3

Created July 20, 2016 12:27
Show Gist options
  • Save vigikaran/fdfdf6d6ffec4b296d7303e012008d0d to your computer and use it in GitHub Desktop.
Save vigikaran/fdfdf6d6ffec4b296d7303e012008d0d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Image Radio Button CSS 3
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Image Radio Buton</title>
<style>
.cc-selector input{
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.cc-selector input:active +.primary_site{opacity: .9;}
.cc-selector input:checked +.primary_site{
-webkit-filter: none;
-moz-filter: none;
filter: none;
}
.primary_site{
cursor:pointer;
background-image:url(https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678064-star-24.png);
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
width:24px;height:24px;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
-moz-filter: brightness(1.8) grayscale(1) opacity(.7);
filter: brightness(1.8) grayscale(1) opacity(.7);
}
.primary_site:hover{
-webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
-moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
filter: brightness(1.2) grayscale(.5) opacity(.9);
}
</style>
</head>
<body>
<form>
<div class="cc-selector">
<input id="tamilwin" type="radio" name="primarySite" value="tamilwin" />
<label class="primary_site" for="tamilwin"></label>
<input id="lankasri" type="radio" name="primarySite" value="lankasri" />
<label class="primary_site" for="lankasri"></label>
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment