Home » Web Design » Creating a beautiful switch using CSS

Creating a beautiful switch using CSS

So, sorry for delay. I’ve had a lot work to do, but from this day I will try to post good stuff more often. Today we will make a beautiful switch using CSS. See the picture below.

Creating a beautiful switch using CSS

Ok. Let’s started with our HTML:

<div class="switch">
 <input type="checkbox" id="switch" class="switch-check">
 <label for="switch" class="switch-label">
 Check
 <span></span>
 </label>
</div>

And next part of code is CSS:

 body {
 background: #222222;
 background: url("http://css-live.ru/Primer/tricks/bg-switch.png") 0 0 repeat;
 }
 .switch {
 background-color: rgba(0,0,0,0.2);
 border-radius: 30px;
 border: 4px solid rgba(58,58,58,0.1);
 box-shadow: 0 0 6px rgba(0,0,0,0.5) inset;
 height: 42px;
 margin: 40px;
 position: relative;
 width: 115px;
 }

 .switch-check {
 position: absolute;
 visibility: hidden;
 }
 .switch-label {
 cursor: pointer;
 display: block;
 height: 42px;
 text-indent: -9999px;
 width: 115px;
 }
 .switch-label:before {
 background: #fff;

 background: radial-gradient(45%, circle, rgb(255, 58, 58) 0%, rgb(255, 113, 113) 100%);
 border-radius: 10px;
 border: 1px solid #742323;
 box-shadow: 0 2px 5px rgba(255,67,48,0.6), 0 0 5px rgba(255,159,109,0.5) inset;
 content: "";
 display: block;
 height: 10px;
 left: -20%;
 position: absolute;
 top: 16px;

 transition:all 0.2s;
 width: 10px;
 z-index: 12;
 }
 .switch-label:after {
 background: #fff;

 background: radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
 border-radius: 10px;
 border: 1px solid #111;
 box-shadow: 0 2px 5px rgba(20,20,20,0.5);
 content: "";
 display: block;
 height: 10px;
 right: -20%;
 position: absolute;
 top: 16px;

 transition:all 0.2s;
 width: 10px;
 z-index: 12;

 }

 .switch-label span {

 background: linear-gradient(#4f4f4f, #2b2b2b);
 border-radius: 30px;
 border: 1px solid #1a1a1a;
 box-shadow: 0 0 4px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.1) inset, 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
 display: block;
 height: 38px;
 left: 1px;
 position: absolute;
 top: 1px;

 transition:all 0.2s linear;
 width: 53px;
 }
 .switch-label span:before {
 background: #fff;

 background: linear-gradient(left, rgba(48,48,48,0.4), rgba(34,34,34,0.4));
 border-radius: 30px 10px 10px 30px;
 box-shadow: -2px 0 5px rgba(0,0,0,0.2) inset;
 content: "";
 display: block;
 height: 33px;
 left: 2px;
 position: absolute;
 top: 2px;
 width: 21px;
 }
 .switch-label span:after {
 background: #fff;

 background: linear-gradient(right, rgba(48,48,48,0.4), rgba(34,34,34,0.4));
 border-radius: 10px 30px 30px 10px;
 box-shadow: 2px 0 5px rgba(0,0,0,0.2) inset;
 content: "";
 display: block;
 height: 33px;
 position: absolute;
 right: 2px;
 top: 2px;
 width: 21px;
 }

 .switch-check:checked + .switch-label span {
 left: 59px;

 }
 .switch-check:checked + .switch-label:before {

 background: radial-gradient(45%, circle, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
 border: 1px solid #111;
 box-shadow: 0 2px 5px rgba(20,20,20,0.5);
 }

 .switch-check:checked + .switch-label:after {

 background: radial-gradient(45%, circle, rgb(128, 215, 255) 0%, rgb(197, 237, 255) 100%);
 border: 1px solid #004562;
 box-shadow: 0 2px 5px rgba(81,208,255,0.5), 0 0 5px rgba(210,243,255,0.5) inset;
 }

That’s it. Unfortunately, this code doesn’t supported by Internet Explorer 7-9, oops! But anyway – it’s a very cool thing to do.

You can see an example of how it works – just click the link.


Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top