lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
78 lines (69 loc) • 3.07 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const RippleButton = ({ text = "Click Me", bgColor, circleColor, width, height, }) => {
// Use a default circle color if none is provided
const defaultCircleColor = circleColor || "#173eff";
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { className: `ripple-btn bg-gray-500 !text-black `, style: {
backgroundColor: bgColor,
width: width,
height: height,
}, children: [(0, jsx_runtime_1.jsx)("span", { className: "circle1" }), (0, jsx_runtime_1.jsx)("span", { className: "circle2" }), (0, jsx_runtime_1.jsx)("span", { className: "circle3" }), (0, jsx_runtime_1.jsx)("span", { className: "circle4" }), (0, jsx_runtime_1.jsx)("span", { className: "circle5" }), (0, jsx_runtime_1.jsx)("span", { className: "text", children: text })] }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: `
.ripple-btn {
font-weight: bold;
padding: 1em 2em;
border: none;
border-radius: 0.6rem;
position: relative;
cursor: pointer;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
/* Ensure text color is set by props if background is set */
color: ${bgColor ? 'white' : 'inherit'};
}
/* Target all circle spans */
.ripple-btn span:not(:nth-child(6)) {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 30px;
width: 30px;
/* Use the prop value for background color */
background-color: ${defaultCircleColor};
border-radius: 50%;
transition: 0.6s ease;
pointer-events: none;
}
.ripple-btn span:nth-child(6) {
position: relative;
z-index: 1;
}
/* Initial offset positioning for the circles */
.ripple-btn span:nth-child(1) {
transform: translate(-3.3em, -4em);
}
.ripple-btn span:nth-child(2) {
transform: translate(-6em, 1.3em);
}
.ripple-btn span:nth-child(3) {
transform: translate(-0.2em, 1.8em);
}
.ripple-btn span:nth-child(4) {
transform: translate(3.5em, 1.4em);
}
.ripple-btn span:nth-child(5) {
transform: translate(3.5em, -3.8em);
}
/* Hover effect: Scale circles up to create the ripple illusion */
.ripple-btn:hover span:not(:nth-child(6)) {
transform: translate(-50%, -50%) scale(4);
transition: 1.5s ease;
}
` } })] }));
};
exports.default = RippleButton;
//# sourceMappingURL=ripple-button.js.map