Bài viết này tôi sẽ hướng dẫn các bạn tạo nút on-off với CSS3 pseduo-class :target và css3 selector.
Demo
Download
Bắt đầu với mã HTML
Code
<span class="button" id="on">
<a href="#off" class="off" id="off">off</a>
<a href="#on" class="on">on</a>
<span class="slide"></span>
</span>
Ở đây toàn bộ button ta để trong thẻ span với id bằng on (để cho lúc khởi đầu button có giá trị on, nếu bạn muốn lúc đầu button có giá trị off thì đổi ngược lại). Bên trong nó là 2 thẻ a với 1 thẻ a có id là off. Cuối cùng là thẻ span class bắng slide là nút trượt.
Mã CSS
Bây giờ ta sắp xếp các thẻ cho giống hình trên với mã css:
Code
.button{
position:relative;
display:block;
width:80px;
height:36px;
background-color:#c8c8c8;
border-radius:5px;
box-shadow:0 0 3px rgba(0,0,0,0.5) inset;
}
.button a{
display:block;
text-align:center;
background-color:transparent;
float:left;
width:40px;
height:36px;
line-height:36px;
font-family:helvetica,arial,sans-serif;
font-size:11px;
text-transform:uppercase;
font-weight:bold;
color:#777;
}
.slide{
display:block;
width:38px;
height:32px;
background-color:#fff;
background-image:-linear-gradient(top,#fff,#f1f1f1);
position:absolute;
left:2px;
top:2px;
border-radius:4px;
box-shadow:0 0 2px rgba(0,0,0,0.2);
}
Làm trượt nút với CSS3Trước tiên thêm thuộc tính transition cho thẻ span.slide:
Code
-moz-transition:all 0.2s ease;
-webkit-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
transition:all 0.2s ease;
Sau đó sử dụng CSS3 :target và ~ selector để khi click làm trượt nút bằng cách thay đổi giá trị left của span.slide.
Code
#on:target .slide{
left:40px;
}
#off:target ~ .slide{
left:2px;
}