"CSS Checkbox Inspiration"
Bootstrap 3.3.0 Snippet by ottster

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <section class="section section--aava"> <h2 class="section__title"> Aava </h2> <div class="toggle-button toggle-button--aava"> <input id="toggleButton" type="checkbox"> <label for="toggleButton" data-on-text="On" data-off-text="Off"></label> <div class="toggle-button__icon"></div> </div> <div class="toggle-button toggle-button--aava"> <input id="toggleButton2" type="checkbox"> <label for="toggleButton2" data-on-text="On" data-off-text="Off"></label> <div class="toggle-button__icon"></div> </div> </section> <section class="section section--tuuli"> <h2 class="section__title"> Tuuli </h2> <div class="toggle-button toggle-button--tuuli"> <input id="toggleButton3" type="checkbox"> <label for="toggleButton3"></label> <div class="toggle-button__icon"></div> </div> <div class="toggle-button toggle-button--tuuli"> <input id="toggleButton4" type="checkbox"> <label for="toggleButton4"></label> <div class="toggle-button__icon"></div> </div> </section> <section class="section section--vesi"> <h2 class="section__title"> Vesi </h2> <div class="toggle-button toggle-button--vesi"> <input id="toggleButton5" type="checkbox"> <label for="toggleButton5" data-on-text="Selected" data-off-text="Select"></label> <div class="toggle-button__icon"></div> </div> <div class="toggle-button toggle-button--vesi"> <input id="toggleButton6" type="checkbox"> <label for="toggleButton6" data-on-text="Selected" data-off-text="Select"></label> <div class="toggle-button__icon"></div> </div> </section> <section class="section section--sade"> <h2 class="section__title"> Sade </h2> <div class="toggle-button toggle-button--sade"> <input id="toggleButton7" type="checkbox"> <label for="toggleButton7" data-on-text="Yes" data-off-text="No"></label> <div class="toggle-button__icon"></div> </div> <div class="toggle-button toggle-button--sade"> <input id="toggleButton8" type="checkbox"> <label for="toggleButton8" data-on-text="Yes" data-off-text="No"></label> <div class="toggle-button__icon"></div> </div> </section> <section class="section section--ilma"> <h2 class="section__title"> Ilma </h2> <div class="toggle-button toggle-button--ilma"> <input id="toggleButton9" type="checkbox"> <label for="toggleButton9" data-on-text="On" data-off-text="Off"></label> <div class="toggle-button__icon"></div> </div> <div class="toggle-button toggle-button--ilma"> <input id="toggleButton10" type="checkbox"> <label for="toggleButton10" data-on-text="On" data-off-text="Off"></label> <div class="toggle-button__icon"></div> </div> </section> <section class="section section--tuli"> <h2 class="section__title"> Tuli </h2> <div class="toggle-button toggle-button--tuli"> <input id="toggleButton11" type="checkbox"> <label for="toggleButton11">Agree this</label> <div class="toggle-button__icon"></div> </div> <div class="toggle-button toggle-button--tuli"> <input id="toggleButton12" type="checkbox"> <label for="toggleButton12">Agree that</label> <div class="toggle-button__icon"></div> </div> </section> </div>
@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700); *, *::after, *::before { box-sizing: border-box; } html, body { height: 100%; min-height: 100%; } body { margin: 0; background: #3D5A59; font-family: 'Raleway', Arial, sans-serif; } .section { text-align: center; height: 100%; margin: 0 auto; padding: 6em 0; } .section__title { font-size: 1.1em; text-transform: uppercase; letter-spacing: 4px; color: #fff; margin-bottom: 3em; } .section--aava { background: #2994B2; } .section--tuuli { background: #474744; } .section--vesi { background: #54567A; } .section--sade { background: #2D4659; } .section--ilma { background: #095062; } .section--tuli { background: #068B78; } .toggle-button { margin: 0 20px; } /* * Toggle button styles */ .toggle-button { position: relative; display: inline-block; color: #fff; } .toggle-button label { display: inline-block; text-transform: uppercase; cursor: pointer; text-align: left; } .toggle-button input { display: none; } .toggle-button__icon { cursor: pointer; pointer-events: none; } .toggle-button__icon:before, .toggle-button__icon:after { content: ""; position: absolute; top: 45%; left: 35%; transition: 0.2s ease-out; } /* * Toggle button variables */ /* * Toggle button styles */ .toggle-button--aava label { height: 50px; line-height: 50px; transition: all 0.2s; border-radius: 2rem; } .toggle-button--aava label:before, .toggle-button--aava label:after { position: absolute; right: 1.5rem; transition: all 0.2s .1s ease-out; } .toggle-button--aava label:before { content: attr(data-on-text); } .toggle-button--aava label:after { content: attr(data-off-text); } .toggle-button--aava input[type=checkbox] + label { width: 120px; background: #FF5335; } .toggle-button--aava input[type=checkbox] + label:before { opacity: 0; transform: translate(0, 20px); } .toggle-button--aava input[type=checkbox] + label:after { opacity: 1; transform: translate(0, 0); } .toggle-button--aava input[type=checkbox]:checked ~ label { width: 120px; background: #61B136; } .toggle-button--aava input[type=checkbox]:checked ~ label:before { opacity: 1; transform: translate(0, 0); } .toggle-button--aava input[type=checkbox]:checked ~ label:after { opacity: 0; transform: translate(0, -20px); } .toggle-button--aava input[type=checkbox]:checked ~ .toggle-button__icon:before { transform: translate(-10%, 100%) rotate(45deg); width: 16.66667px; } .toggle-button--aava input[type=checkbox]:checked ~ .toggle-button__icon:after { transform: translate(30%) rotate(-45deg); } .toggle-button--aava .toggle-button__icon { position: absolute; left: 0; top: 0; height: 50px; width: 50px; } .toggle-button--aava .toggle-button__icon:before, .toggle-button--aava .toggle-button__icon:after { height: 3px; border-radius: 3px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } .toggle-button--aava .toggle-button__icon:before { width: 25px; transform: rotate(45deg); } .toggle-button--aava .toggle-button__icon:after { width: 25px; transform: rotate(-45deg); } /* * Toggle button variables */ /* * Toggle button styles */ .toggle-button--tuuli label { height: 50px; line-height: 50px; transition: all 0.2s; border-radius: 2rem; } .toggle-button--tuuli label:before, .toggle-button--tuuli label:after { position: absolute; right: 1rem; transition: all 0.2s .1s ease-out; } .toggle-button--tuuli input[type=checkbox] + label { width: 50px; background: #FF5335; } .toggle-button--tuuli input[type=checkbox] + label:before { opacity: 0; transform: translate(0, 20px); } .toggle-button--tuuli input[type=checkbox] + label:after { opacity: 1; transform: translate(0, 0); } .toggle-button--tuuli input[type=checkbox]:checked ~ label { width: 50px; background: #61B136; } .toggle-button--tuuli input[type=checkbox]:checked ~ .toggle-button__icon:before { transform: translate(-30%, 100%) rotate(45deg) scale(0.6, 1); } .toggle-button--tuuli input[type=checkbox]:checked ~ .toggle-button__icon:after { transform: translate(20%) rotate(-45deg); } .toggle-button--tuuli .toggle-button__icon { position: absolute; height: 50px; width: 50px; top: 0; left: 0; } .toggle-button--tuuli .toggle-button__icon:before, .toggle-button--tuuli .toggle-button__icon:after { width: 25px; height: 3px; border-radius: 3px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); margin-left: -10%; top: 48%; } .toggle-button--tuuli .toggle-button__icon:before { transform: rotate(45deg); } .toggle-button--tuuli .toggle-button__icon:after { transform: rotate(-45deg); } /* * Toggle button variables */ /* * Toggle button styles */ .toggle-button--vesi label { height: 50px; line-height: 50px; transition: all 0.2s; border-radius: 2rem; } .toggle-button--vesi label:before, .toggle-button--vesi label:after { position: absolute; right: 1.5rem; transition: all 0.2s .15s ease-out; } .toggle-button--vesi label:before { content: attr(data-on-text); } .toggle-button--vesi label:after { content: attr(data-off-text); } .toggle-button--vesi input[type=checkbox] + label { width: 150px; background: #FF5335; } .toggle-button--vesi input[type=checkbox] + label:before { opacity: 0; transform: translate(0, 20px); } .toggle-button--vesi input[type=checkbox] + label:after { opacity: 1; transform: translate(0, 0); } .toggle-button--vesi input[type=checkbox]:checked ~ label { width: 180px; background: #61B136; } .toggle-button--vesi input[type=checkbox]:checked ~ label:before { opacity: 1; transform: translate(0, 0); } .toggle-button--vesi input[type=checkbox]:checked ~ label:after { opacity: 0; transform: translate(0, -20px); } .toggle-button--vesi input[type=checkbox]:checked ~ .toggle-button__icon:before { transform: translate(-10%, 100%) rotate(45deg); width: 16.66667px; } .toggle-button--vesi input[type=checkbox]:checked ~ .toggle-button__icon:after { transform: translate(30%) rotate(-45deg); } .toggle-button--vesi .toggle-button__icon { position: absolute; left: 0; top: 0; height: 50px; width: 50px; } .toggle-button--vesi .toggle-button__icon:before, .toggle-button--vesi .toggle-button__icon:after { height: 3px; border-radius: 3px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } .toggle-button--vesi .toggle-button__icon:before { width: 25px; transform: rotate(90deg); } .toggle-button--vesi .toggle-button__icon:after { width: 25px; transform: rotate(0); } /* * Toggle button variables */ /* * Toggle button styles */ .toggle-button--sade { width: 100px; height: 20px; } .toggle-button--sade label { position: absolute; left: 0; width: 20px; height: 20px; line-height: 20px; transition: all 0.2s; background: #fff; border-radius: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } .toggle-button--sade label:before, .toggle-button--sade label:after { position: absolute; top: 0; left: 30px; transition: all 0.2s .1s ease-out; } .toggle-button--sade label:before { content: attr(data-on-text); } .toggle-button--sade label:after { content: attr(data-off-text); } .toggle-button--sade input + label:before { opacity: 0; transform: translate(20px, 0); } .toggle-button--sade input + label:after { opacity: 1; transform: translate(0, 0); } .toggle-button--sade input:checked ~ label:before { opacity: 1; transform: translate(0, 0); } .toggle-button--sade input:checked ~ label:after { opacity: 0; transform: translate(20px, 0); } .toggle-button--sade input[type=checkbox]:checked ~ .toggle-button__icon:before, .toggle-button--sade input[type=checkbox]:checked ~ .toggle-button__icon:after { background: #61B136; } .toggle-button--sade input[type=checkbox]:checked ~ .toggle-button__icon:before { transform: translate(-30%, 70%) rotate(45deg) scale(0.7, 1); } .toggle-button--sade input[type=checkbox]:checked ~ .toggle-button__icon:after { transform: translate(20%) rotate(-45deg); } .toggle-button--sade .toggle-button__icon { position: absolute; height: 20px; width: 20px; top: 0; left: 0; } .toggle-button--sade .toggle-button__icon:before, .toggle-button--sade .toggle-button__icon:after { width: calc(20px - 8px); height: 3px; border-radius: 3px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); margin-left: -3px; top: 40%; background: #FF5335; } .toggle-button--sade .toggle-button__icon:before { transform: rotate(45deg); } .toggle-button--sade .toggle-button__icon:after { transform: rotate(-45deg); } .toggle-button--sade:hover label { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .toggle-button--sade:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon:before { animation: icon-hover-before .2s; } .toggle-button--sade:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon:after { animation: icon-hover-after .2s; } @keyframes icon-hover-before { 0% { transform: rotate(45deg) scale(1, 1); } 100% { transform: rotate(45deg) scale(1.2, 1.2); } } @keyframes icon-hover-after { 0% { transform: rotate(-45deg) scale(1, 1); } 50% { transform: rotate(-45deg) scale(1.2, 1.2); } } /* * Toggle button variables */ /* * Toggle button styles */ .toggle-button--ilma { width: 100px; height: 20px; } .toggle-button--ilma label { position: absolute; left: 0; width: 20px; height: 20px; line-height: 20px; transition: all 0.2s; background: #fff; border-radius: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } .toggle-button--ilma label:before, .toggle-button--ilma label:after { position: absolute; top: 0; left: 30px; transition: all 0.2s .1s ease-out; } .toggle-button--ilma label:before { content: attr(data-on-text); } .toggle-button--ilma label:after { content: attr(data-off-text); } .toggle-button--ilma input + label:before { opacity: 0; transform: translate(20px, 0); } .toggle-button--ilma input + label:after { opacity: 1; transform: translate(0, 0); } .toggle-button--ilma input:checked ~ label:before { opacity: 1; transform: translate(0, 0); } .toggle-button--ilma input:checked ~ label:after { opacity: 0; transform: translate(20px, 0); } .toggle-button--ilma input[type=checkbox]:checked ~ .toggle-button__icon:before, .toggle-button--ilma input[type=checkbox]:checked ~ .toggle-button__icon:after { background: #61B136; transition: none; transform-origin: left center; } .toggle-button--ilma input[type=checkbox]:checked ~ .toggle-button__icon:before { animation: iconShowBefore .3s; transform: translate(0, 0) rotate(45deg) scale(0.6, 1); } .toggle-button--ilma input[type=checkbox]:checked ~ .toggle-button__icon:after { animation: iconShowAfter .6s; transform: translate(4px, 6px) rotate(-45deg); } .toggle-button--ilma .toggle-button__icon { position: absolute; height: 20px; width: 20px; top: 0; left: 0; } .toggle-button--ilma .toggle-button__icon:before, .toggle-button--ilma .toggle-button__icon:after { width: calc(20px - 6px); height: 3px; border-radius: 3px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); margin-left: -4px; top: 40%; background: #FF5335; transform-origin: center center; } .toggle-button--ilma .toggle-button__icon:before { transform: rotate(45deg); } .toggle-button--ilma .toggle-button__icon:after { transform: rotate(-45deg); } .toggle-button--ilma:hover label { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .toggle-button--ilma:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon:before { animation: iconHoverBefore .2s; } .toggle-button--ilma:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon:after { animation: iconHoverAfter .2s; } @keyframes iconShowBefore { 0% { transform: translate(0, 0) rotate(45deg) scale(0, 1); } 100% { transform: translate(0, 0) rotate(45deg) scale(0.6, 1); } } @keyframes iconShowAfter { 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; transform: translate(4px, 6px) rotate(-45deg) scale(0, 1); } 100% { transform: translate(4px, 6px) rotate(-45deg) scale(1, 1); } } @keyframes iconHoverBefore { 0% { transform: rotate(45deg) scale(1, 1); } 100% { transform: rotate(45deg) scale(1.2, 1.2); } } @keyframes iconHoverAfter { 0% { transform: rotate(-45deg) scale(1, 1); } 50% { transform: rotate(-45deg) scale(1.2, 1.2); } } /* * Toggle button variables */ /* * Toggle button styles */ .toggle-button--tuli label { line-height: 20px; text-indent: 30px; } .toggle-button--tuli input[type=checkbox]:checked ~ .toggle-button__icon { background: #fff; } .toggle-button--tuli input[type=checkbox]:checked ~ .toggle-button__icon:before, .toggle-button--tuli input[type=checkbox]:checked ~ .toggle-button__icon:after { opacity: 1; } .toggle-button--tuli .toggle-button__icon { position: absolute; top: 0; left: 0; width: 20px; height: 20px; transition: all 0.2s; border: 2px solid #fff; border-radius: 1px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } .toggle-button--tuli .toggle-button__icon:before, .toggle-button--tuli .toggle-button__icon:after { top: 5px; left: 2px; width: 12px; height: 2px; border-radius: 3px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); top: 35%; background: #61B136; opacity: 0; transform-origin: left center; } .toggle-button--tuli .toggle-button__icon:before { transform: translate(0, 0) rotate(45deg) scale(0.6, 1); } .toggle-button--tuli .toggle-button__icon:after { transform: translate(4px, 6px) rotate(-45deg); } .toggle-button--tuli:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }

Related: See More


Questions / Comments: