{"id":23620,"date":"2015-07-24T22:46:22","date_gmt":"2015-07-24T17:16:22","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=23620"},"modified":"2015-07-24T22:46:22","modified_gmt":"2015-07-24T17:16:22","slug":"build-custom-ios-swipe-button-with-css3","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/build-custom-ios-swipe-button-with-css3\/","title":{"rendered":"Build Custom iOS Swipe Button with CSS3"},"content":{"rendered":"

There are many ways to make iOS swipe button with toggle effect:<\/p>\n

But CSS and CSS3 is the best way to make these buttons because of its light weight.<\/p>\n

Here is the image of what we are going to make:<\/h3>\n

\"switch-btn\"<\/p>\n

Let\u2019s start with the HTML code <\/h3>\n

In this I have used checkbox to use the functionality of click. But we will not display these input checkboxes. We can use display none to hide the checkbox.<\/p>\n

\n 
\nHTML Code <\/h3>\n

[java]
\n<div class="swipe-btn">
\n <input type="checkbox" id="checkbox3">
\n <label for="checkbox3"><b><\/b><\/label>
\n<\/div>
\n[\/java]<\/p>\n

 
\nCSS Code:<\/b> use below css code one by one
\n <\/p>\n

Styling of swipe-btn div:<\/p>\n

[java]
\n.swipe-btn {
\n display: inline-block;
\n width: 70px;
\n height: 36px;
\n position: relative;
\n border-radius: 20px;
\n color: #FFF;
\n overflow: hidden;
\n box-shadow: 0 1px 0 #CCC;
\n border: 1px solid #D3D2D2;
\n}
\n[\/java]<\/p>\n

Styling of label:<\/p>\n

[java]
\n.swipe-btn label {
\n width: 200%;
\n height: 36px;
\n line-height: 30px;
\n position: absolute;
\n top: 0;
\n left: 0;
\n -webkit-transition: 0.13s;
\n -moz-transition: 0.13s;
\n transition: 0.13s;
\n font-size: 12px;
\n z-index: 1;
\n cursor: pointer;
\n}
\n[\/java]<\/p>\n

Use of ::after, ::before pseudo element<\/p>\n

[java]<\/p>\n

.swipe-btn label::before {
\n content: "ON";
\n width: 50px;
\n height: 36px;
\n float: left;
\n margin-right:-20px;
\n padding: 3px 0 0 4px;
\n text-align: center;
\n background: #007FEA;
\n text-indent: -16px;
\n}<\/p>\n

.swipe-btn label::after {
\n content: "OFF";
\n width: 50px;
\n height: 36px;
\n float: left;
\n margin-left:-15px;
\n padding: 3px 0 0 4px;
\n text-align: center;
\n color: #999;
\n background: #ccc;
\n}
\n[\/java]<\/p>\n

Then we give styling to b(bold) tag which will move in label tag on click of checkbox:<\/p>\n

[html]<\/p>\n

.swipe-btn label b {
\n display: block;
\n width: 36px;
\n height: 36px;
\n float: left;
\n position: relative;
\n z-index: 1;
\n border: 1px solid #D3D2D2;
\n background: #fff;
\n border-radius: 20px;
\n}
\n[\/html]<\/p>\n

Then we hide the checkbox:<\/p>\n

[java]
\n.swipe-btn input {display: none;}
\n[\/java]<\/p>\n

\n
When we click on checkbox b(bold) tag will move left in label tag. And we use pseudo-class selector \u201c:checked\u201d for moving b(bold) tag. <\/p>\n

Note: We can replace \u201c:checked\u201d with a class also. <\/b>
\n[java]
\n.swipe-btn input:checked ~ label {
\n left:-35px;
\n}
\n[\/java]<\/p>\n

\n
Note:<\/b> If you want to customise these buttons. You can use font Awesome in place of content: \u201cON\u201d and content: \u201cOFF\u201d in css. Or you can use background image in place of content.<\/p>\n

I hope you enjoyed and hope you’re taking what you see here and expand or improve upon it.<\/p>\n","protected":false},"excerpt":{"rendered":"

There are many ways to make iOS swipe button with toggle effect: But CSS and CSS3 is the best way to make these buttons because of its light weight. Here is the image of what we are going to make: Let\u2019s start with the HTML code In this I have used checkbox to use the […]<\/p>\n","protected":false},"author":231,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":36},"categories":[1],"tags":[355,4842],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/23620"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/231"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=23620"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/23620\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=23620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=23620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=23620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}