DEV Community

loading...
Cover image for How to design an iOS style switch

How to design an iOS style switch

urielbitton profile image Uriel Bitton ・2 min read

First seen in 2007 when the first iphone came out, those nifty iOS switches that are used until today are undeniably nice and modern looking. Having them in your web app or mobile app can add a nice UI experience and give it a touch of modernity.

Let's see how we can go about designing them with a little bit of css code and 3 html elements only.

We'll start by adding a label element, with an input and an i element.

HTML

<label class="ios-switch">
<input type="checkbox">
<i></i>
</label>
Enter fullscreen mode Exit fullscreen mode

Now the CSS

We'll start with the label container first

.form-switch {
    display: inline-block;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

We need to hide the input element as we don't want to see it as a classic checkbox element.

.form-switch input {
    display: none;
}
Enter fullscreen mode Exit fullscreen mode

Then we style the i tag inside. We'll set the dimensions of the button, with some margin and transition effects. We also want the background to be off-white.

.form-switch i {
    position: relative;
    display: inline-block;
    margin-right: 0.5rem;
    width: 46px;
    height: 26px;
    background-color: #e6e6e6;
    border-radius: 23px;
    vertical-align: text-bottom;
    transition: all 0.3s;
}
Enter fullscreen mode Exit fullscreen mode

We'll also need to add a pseudo-element ::before. When the switch is turned off (default) it has a white background.

.form-switch i::before {
    content: "";
    position: absolute;
    left: 0;
    width: 42px;
    height: 22px;
    background-color: #fff;
    border-radius: 11px;
    transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
    transition: all 0.3;
}
Enter fullscreen mode Exit fullscreen mode

The ::after pseudo-element will create the round switch "handle".

.form-switch i::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 22px;
    background-color: #fff;
    border-radius: 11px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
    transform: translate3d(2px, 2px, 0);
    transition: all 0.2s ease-in-out;
}
Enter fullscreen mode Exit fullscreen mode

Here we will set the width of the switch when it is activated, with some 3d transforms

.form-switch:active i::after {
    width: 28px;
    transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after {
    transform: translate3d(16px, 2px, 0);
}
Enter fullscreen mode Exit fullscreen mode

Then we'll add the background color of the switch when it is turned on

.form-switch input:checked + i {
    background-color: #5bda4e;
}
Enter fullscreen mode Exit fullscreen mode

Finally we'll set the pseudo-elements for the i tag when we turn on the switch so it gives an effect of opening up like the iPhone does.

.form-switch input:checked + i::before {
    transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}
.form-switch input:checked + i::after {
    transform: translate3d(22px, 2px, 0);
}
Enter fullscreen mode Exit fullscreen mode

That's it, you can use the code as you want and add it to your website or app. A cool idea would be to convert it into a react component. Enjoy!

My App (where is used the switch): https://flexrweb.com/octacore

The Github repo: https://github.com/urielbitton/octacore

Discussion (0)

Forem Open with the Forem app