Nghĩa Rồng Blog | Thủ thuật,Template Blogger

Tạo button 7 màu bằng CSS với hiệu ứng hover tuyệt đẹp cho Blogspot. Button bằng CSS, hiệu ứng hover đẹp.

Chèn CSS vào dưới thẻ <style>

.rainbow-button { width:calc(20vw + 6px); height:calc(8vw + 6px); background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%); border-radius:5px; display:flex; align-items:center; justify-content:center; text-transform:uppercase; font-size:3vw; font-weight:bold; } .rainbow-button:after { content:attr(alt); width:20vw; height:8vw; background-color:#191919; display:flex; align-items:center; justify-content:center; } .rainbow-button:hover { animation:slidebg 2s linear infinite; } @keyframes slidebg { to { background-position:20vw; } }

CÁCH SỬ DỤNG

<a href="#" class="rainbow-button" alt="Nghĩa Rồng"></a>

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