Skip to content

Instantly share code, notes, and snippets.

@colynb

colynb/index.html

Created June 28, 2016 15:34
Show Gist options
  • Save colynb/2ad9dd063af78dd087232732b2c7ce0d to your computer and use it in GitHub Desktop.
Save colynb/2ad9dd063af78dd087232732b2c7ce0d to your computer and use it in GitHub Desktop.
Download ZIP
Animated and Styled Checkboxes
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animated and Styled Checkboxes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/img/favicons/favicon.ico">
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<div class="page-home">
<form>
<label class="styled-checkbox">
<input type="checkbox">
<span>Item One</span>
</label>
<label class="styled-checkbox">
<input type="checkbox" checked>
<span>Item Two</span>
</label>
<label class="styled-checkbox">
<input type="checkbox" disabled>
<span>Item Three</span>
</label>
</form>
</div>
</body>
</html>
Raw
styled-checkboxes.css
.styled-checkbox {
cursor: pointer;
font-size: 2em;
display: table; }
.styled-checkbox input[type="checkbox"] {
display: none; }
.styled-checkbox input[type="checkbox"] + span:before {
content: "";
display: inline-block;
font-family: "FontAwesome";
font-size: inherit;
margin-right: 5px;
text-rendering: auto;
width: 1em;
-webkit-font-smoothing: antialiased; }
.styled-checkbox input[type="checkbox"]:checked + span {
font-weight: 700; }
.styled-checkbox input[type="checkbox"]:checked + span:before {
content: "";
color: cornflowerblue;
display: inline-block;
font-family: "FontAwesome";
font-size: inherit;
margin-right: 5px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-animation: tick 180ms ease-in;
-moz-animation: tick 180ms ease-in;
animation: tick 180ms ease-in; }
.styled-checkbox input[type="checkbox"]:disabled + span {
color: #aaa;
cursor: not-allowed; }
.styled-checkbox input[type="checkbox"]:disabled + span:before {
content: "";
color: #aaa;
display: inline-block;
font-family: "FontAwesome";
font-size: inherit;
margin-right: 5px;
text-rendering: auto;
-webkit-font-smoothing: antialiased; }
@-webkit-keyframes tick {
0% {
-webkit-transform: scale(0); }
90% {
-webkit-transform: scale(1.5); }
100% {
-webkit-transform: scale(1); } }
@-moz-keyframes tick {
0% {
-moz-transform: scale(0); }
90% {
-moz-transform: scale(1.5); }
100% {
-moz-transform: scale(1); } }
@keyframes tick {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0); }
90% {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5); }
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment