Share code button với hiệu ứng bong bóng hoa giấy tuyệt đẹp

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 Code Pro 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é!

Share code button với hiệu ứng bong bóng hoa giấy tuyệt đẹp

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é!

Các bước thực hiện

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 button

<center><button class="codepro-bubbly-button" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')">Click me!</button></center>

Lời kết

Trên đây là toàn bộ code và hướng dẫn tạo button với hiệu ứng bong bóng hoa giấy. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!

Copyright © Code Pro