Checkbox động theo phong cách Facebook với Font Awesome

Cập nhật: Lượt xem: 509 [ Css ]

Font Awesome là một nguồn cung cấp các icon nhẹ và được dùng phổ biến nhiều nhất hiện nay trên các trang web hay app. Mình xin chia sẻ cho các bạn cách tận dụng hiệu ứng động cùng với các icon từ Font Awesome sẽ cho ra kết quả là những nút bấm (checkbox) tương tự như các bạn thấy trên trang Facebook.

Checkbox động theo phong cách Facebook với Font Awesome

HTML

Đầu tiên các bạn cần chèn thư viện font Awesome vào bên trong thẻ <head>.

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>

Sau đó tạo một danh sách các checkbox, class “.is-checked” sẽ được chèn vào các phần tử được chọn( active).

<ul class="choice-list">
 <li class="checkbox check is-checked"></li>
 <li class="checkbox heart "></li>
 <li class="checkbox star"></li>
 <li class="checkbox email is-checked"></li>
 <li class="checkbox bell"></li>
 <li class="checkbox map"></li>
 <li class="checkbox wifi is-checked"></li>
 </ul>

CSS

Trong phần này, chúng ta sẽ tạo các hiệu ứng động cho việc chọn checkbox bằng CSS3. Các bạn có thể tham khảo đoạn css bên dưới.

.checkbox{
    float:left;
    width:80px;
    height:80px;
    cursor:pointer;
    -moz-border-radius:80px;
    -webkit-border-radius:80px;
    border-radius:80px;display:block;
    background-color:rgba(0,0,0,0.25);
    margin:20px;-moz-transition:all 0.15s cubic-bezier(0.5,0,0,1.5);
    -o-transition:all 0.15s cubic-bezier(0.5,0,0,1.5);
    -webkit-transition:all 0.15s cubic-bezier(0.5,0,0,1.5);
    transition:all 0.15s cubic-bezier(0.5,0,0,1.5);
}
 
.checkbox:hover{
    background-color:rgba(0,0,0,0.5);
}
 
.checkbox:hover:after{
    color:white;
}
 
.checkbox:after{
    line-height:85px;
    font-family:"FontAwesome";
    display:block;content:"";
    color:rgba(255,255,255,0.5);
    text-align:center;
    width:100%;
    height:100%;
    -moz-transform:scale(0.5);
    -ms-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    border-radius:100%;font-size:54px;
    -moz-transition:all 0.15s cubic-bezier(0.5,0,0,1.5),font-size 0.35s cubic-bezier(0.5,0,0,3);
    -o-transition:all 0.15s cubic-bezier(0.5,0,0,1.5),font-size 0.35s cubic-bezier(0.5,0,0,3);
    -webkit-transition:all 0.15s cubic-bezier(0.5,0,0,1.5),font-size 0.35s cubic-bezier(0.5,0,0,3);
    transition:all 0.15s cubic-bezier(0.5,0,0,1.5),font-size 0.35s cubic-bezier(0.5,0,0,3);
}
 
.checkbox.is-checked:after{
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -webkit-transform:scale(1);
    transform:scale(1);
    font-size:44px;color:white;
}
 
.checkbox.is-checked:hover:after{
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
}
 
.check:after{
    content:"\f00c";
    background-color:rgba(165,194,92,0);
}
 
.check.is-checked:after{
    background-color:#a5c25c;
}
 
.heart:after{
    content:"\f004";
    background-color:rgba(241,76,56,0);
}
 
.heart.is-checked:after{
    background-color:#f14c38;
}
 
.star:after{
    content:"\f005";
    background-color:rgba(255,202,37,0);
}
 
.star.is-checked:after{
    background-color:#ffca25;
}
 
.email:after{
    content:"\f1fa";
    background-color:rgba(145,61,136,0);
}
 
.email.is-checked:after{
    background-color:#913D88;
}
 
.bell:after{
    content:"\f0f3";
    background-color:rgba(244,179,80,0);
}
 
.bell.is-checked:after{
    background-color:#F4B350;
}
 
.map:after{
    content:"\f041";
    background-color:rgba(68,108,179,0);
}
 
.map.is-checked:after{
    background-color:#446CB3;
}
.wifi:after{
    content:"\f1eb";
    background-color:rgba(224,130,131,0);
}
 
.wifi.is-checked:after{
    background-color:#E08283;
}

Javascript

Cuối cùng, các bạn chỉ cần chèn đoạn script bên dưới để mọi thứ được hoạt động.

<script src="jquery.min.js"></script>
<script type="text/javascript">
    $('.checkbox').click(function(){
        $(this).toggleClass('is-checked');
 });
</script>

Chúc các bạn thành công !