Xin chào các bạn, chào mừng các bạn đến với bài viết này. Hôm nay sẽ chia sẻ cho các bạn code button với hiệu ứng bong bóng hoa giấy tuyệt đẹp, cùng theo dõi nhé!

 Button sử dụng CSS3 và một chút JavaScript, khá là nhẹ và sẽ không ảnh hưởng đến tốc độ load trang, các bạn yên tâm sử dụng nhé!

Bước 1: Thêm css làm đẹp button

.codepro-bubbly-button { font-family: 'Helvetica', 'Arial', sans-serif; display: inline-block; font-size: 1em; padding: 1em 2em; -webkit-appearance: none; appearance: none; background-color: #ff0081; color: #fff; border-radius: 4px; border: none; cursor: pointer; position: relative; transition: transform ease-in 0.1s, box-shadow ease-in 0.25s; box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5) } .codepro-bubbly-button:focus { outline: 0 } .codepro-bubbly-button:before, .codepro-bubbly-button:after { position: absolute; content: ''; display: block; width: 140%; height: 100%; left: -20%; z-index: -1000; transition: all ease-in-out 0.5s; background-repeat: no-repeat } .codepro-bubbly-button:before { display: none; top: -75%; background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%); background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18% } .codepro-bubbly-button:after { display: none; bottom: -75%; background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%); background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20% } .codepro-bubbly-button:active { transform: scale(0.9); background-color: #e60074; box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2) } .codepro-bubbly-button.animate:before { display: block; animation: topBubbles ease-in-out 0.75s forwards } .codepro-bubbly-button.animate:after { display: block; animation: bottomBubbles ease-in-out 0.75s forwards } @keyframes topBubbles { 0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90% } 50% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30% } 100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0% } } @keyframes bottomBubbles { 0% { background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0% } 50% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0% } 100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0% } }

Bước 2: Thêm js tạo hiệu ứng:

var animateButton = function(e) { e.preventDefault; e.target.classList.remove('animate'); e.target.classList.add('animate'); setTimeout(function() { e.target.classList.remove('animate'); }, 700); }; var bubblyButtons = document.getElementsByClassName("bubbly-button"); for (var i = 0; i < bubblyButtons.length; i++) { bubblyButtons[i].addEventListener('click', animateButton, false); }
Bước 3: Cách sử dụng botton:
<center><button class="codepro-bubbly-button" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')">Click me!</button></center>
- - 0 bình luận
CHUYÊN MỤC

HIỆN TẠI CÓ 0 BÌNH LUẬN

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé