Thiết kế Button có style giống với iOS

Bài viết này sẽ hướng dẫn các bạn thiết kế một nút switch button sử dụng css3 và jquery giống với các nút trong hệ điều hành iOS của Apple.

Bài viết được leech từ 9lessions.com, bạn có thể xem bài viết gốc tại đây
Đối với bài tuts này, các bạn có thể ứng dụng vào làm các button, các nút dạng shortcode trong wordpress cũng rất hay.

Code

HTML code

Để làm được bài này, chúng ta chỉ cần đoạn HTML đơn giản như dưới đây thôi

 <label>
<input type="checkbox" name="checkboxName" class="checkbox"/>
<div class="switch"></div>
</label>

<label>

</label>

CSS

.switch
{
width: 62px;
height: 32px;
background: #E5E5E5;
z-index: 0;
margin: 0;
padding: 0;
appearance: none;
border: none;
cursor: pointer;
position: relative;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}

.switch

{

width: 62px;

height: 32px;

background: #E5E5E5;

z-index: 0;

margin: 0;

padding: 0;

appearance: none;

border: none;

cursor: pointer;

position: relative;

border-radius:16px; //IE 11

-moz-border-radius:16px; //Mozilla

-webkit-border-radius:16px; //Chrome and Safari

}

Với đoạn CSS trên, chúng ta sẽ được

.switch:before
{
content: ' ';
position: absolute;
left: 1px;
top: 1px;
width: 60px;
height: 30px;
background: #FFFFFF;
z-index: 1;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}

.switch:before

{

content: ' ';

position: absolute;

left: 1px;

top: 1px;

width: 60px;

height: 30px;

background: #FFFFFF;

z-index: 1;

border-radius:16px; //IE 11

-moz-border-radius:16px; //Mozilla

-webkit-border-radius:16px; //Chrome and Safari

}

.switch:after 
{
content: ' ';
height: 29px;
width: 29px;
border-radius: 28px;
z-index: 2;
background: #FFFFFF;
position: absolute;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
top: 1px;
left: 1px;
-webkit-box-shadow: 0 2px 5px #999999;
box-shadow: 0 2px 5px #999999;
}

.switch:after

{

content: ' ';

height: 29px;

width: 29px;

border-radius: 28px;

z-index: 2;

background: #FFFFFF;

position: absolute;

-webkit-transition-duration: 300ms;

transition-duration: 300ms;

top: 1px;

left: 1px;

-webkit-box-shadow: 0 2px 5px #999999;

box-shadow: 0 2px 5px #999999;

}

.switchOn , .switchOn:before
{
background: #4cd964 !important;
}
.switchOn:after
{
left: 21px !important;
}

.switchOn , .switchOn:before

{

background: #4cd964 !important;

}

.switchOn:after

{

left: 21px !important;

}

Jquery

Với jquery làm nhiệm vụ switch khi người dùng nhấn chọn để chuyển class thôi.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{

$('.switch').click(function()
{
$(this).toggleClass("switchOn");
});

});
</script>

$(document).ready(function()

{

$('.switch').click(function()

{

$(this).toggleClass("switchOn");

});

</script>

Vậy là xong rồi đó, chúc các bạn có nút button đẹp cho website của mình

Thiết kế Button có style giống với iOS

Code

HTML code

CSS

Jquery

Download code

Like this:

Có liên quan

Nguyễn Trung Hiếu

Code

HTML code

CSS

Jquery

Download code

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu