Tạo biểu tượng Rainbow Circle với hiệu ứng hover đẹp mắt cho Blogger

Create cool badge Rainbow Circle with beautiful hover effect for Blogger

Hôm nay Iris Tips sẽ chia sẻ cho các bạn cách làm huy hiệu Rainbow Circle, bạn có thể dùng nó để trang trí cho blog của mình. Đặc biệt hiệu ứng không có bất kỳ jQuery hay Javascript nào, đơn giản chỉ tận dụng sức mạnh của CSS nên sẽ không làm ảnh hưởng đến tốc độ tải trang của bạn.

CSS

1 Vào Mẫu >> Chỉnh sửa HTML và chèn đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

 .circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)} 

HTML

2 Vào Bố cục >> Thêm tiện ích HTML/Javascript và chèn vào nơi bạn thích

 <div class="circle">
<h1><a href="http://iris-tips.blogspot.com">Iris Tips</a></h1> 

• DEMO

Iris Tips

Đẹp mà đơn giản phải không nào ^^
Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm