Nhiều khi các bạn lại muốn chỉnh kích thước của các nút này theo ý mình để phù hợp với mục đích sử dụng nào đó.
Vậy ta có làm được không? Câu trả lời là hoàn toàn có thể. Chúng ta hoàn toàn có thể chỉnh sửa được kích thước của các nút like và share của facebook, thậm chí cả màu sắc các nút Like Share của facebook.
1- Thay đổi kích thước nút like share facebook
Cụ thể 2 nút thích và chia sẻ của facebook có class
.fb-like và .fb-share-button
+ Thay đổi kích thước về chiều cao
.fb-like { transform: scaleY(1.5); -ms-transform: scaleY(1.5); -webkit-transform: scaleY(1.5); -o-transform: scaleY(1.5); -moz-transform: scaleY(1.5); }1.5 ở đây là tăng thêm 150% kích thước hiện tại đang dùng. Giá trị này thay đổi tùy theo nhu cầu của bạn.
+ Thay đổi kích thước về chiều rộng
.fb-like { transform: scaleX(1.5); -ms-transform: scaleX(1.5); -webkit-transform: scalex(1.5); -o-transform: scaleX(1.5); -moz-transform: scaleX(1.5); }+ Thay đổi cả chiều cao và chiều rộng
.fb-like { transform: scale(1.5); -ms-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -moz-transform: scale(1.5); }Với class .fb-share-button cũng tương tự.
2- Thay đổi màu sắc nút like share facebook
Thay đổi màu nút like share của Facebook, ta sẽ sử dụng bộ lọc CSS. Thuộc tính bộ lọc CSS sẽ cung cấp cho chúng ta quyền truy cập vào hiệu ứng xoay màu. Hiệu ứng xoay màu sẽ cho phép chúng ta thay đổi màu của nút dựa trên các mảng màu 360 độ.
Code có dạng sau
.fb-like { filter:hue-rotate(Xdeg); -webkit-filter: hue-rotate(Xdeg); }Bạn thay thế X bằng một giá trị số cụ thể nào đó tương ứng với màu sắc được quy định.
Ví dụ:
.fb-like { filter:hue-rotate(240deg); -webkit-filter: hue-rotate(240deg); }Dưới đây là một số màu
- Màu đỏ = 120deg;
- Màu nâu = 180deg;
- Màu xanh lá cây = 300deg.