├── img
├── S
└── Chiku.png
├── .github
└── workflows
│ └── static.yml
├── README.md
├── script.js
├── background.js
├── index.html
└── styles.css
/img/S:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/img/Chiku.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Itz-Murali/Chiku-Ai-Image-Gen/HEAD/img/Chiku.png
--------------------------------------------------------------------------------
/.github/workflows/static.yml:
--------------------------------------------------------------------------------
1 | # Simple workflow for deploying static content to GitHub Pages
2 | name: Deploy static content to Pages
3 |
4 | on:
5 | # Runs on pushes targeting the default branch
6 | push:
7 | branches: ["main"]
8 |
9 | # Allows you to run this workflow manually from the Actions tab
10 | workflow_dispatch:
11 |
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 | contents: read
15 | pages: write
16 | id-token: write
17 |
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 | group: "pages"
22 | cancel-in-progress: false
23 |
24 | jobs:
25 | # Single deploy job since we're just deploying
26 | deploy:
27 | environment:
28 | name: github-pages
29 | url: ${{ steps.deployment.outputs.page_url }}
30 | runs-on: ubuntu-latest
31 | steps:
32 | - name: Checkout
33 | uses: actions/checkout@v4
34 | - name: Setup Pages
35 | uses: actions/configure-pages@v5
36 | - name: Upload artifact
37 | uses: actions/upload-pages-artifact@v3
38 | with:
39 | # Upload entire repository
40 | path: '.'
41 | - name: Deploy to GitHub Pages
42 | id: deployment
43 | uses: actions/deploy-pages@v4
44 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ✨ ChikuAi — Your Magical Image Genie ✨
6 |
7 |
8 | Enter Prompt, Get Art. Simple, Fast, Beautiful.
9 |
10 |
11 |
12 |
13 |
14 |
15 | ---
16 |
17 | ### 🌟 What Is ChikuAi?
18 |
19 | > **ChikuAi** Is A Minimal Yet Powerful Ai-Powered Image Generator
20 | > Type Any Prompt, And Watch Magic Happen Instantly.
21 | > Inspired By Imagination, Built With 💖 Love, And Delivered With Speed.
22 |
23 | ---
24 |
25 | ### 🧠 Features
26 |
27 | - Clean Ui With Beautiful Colors 🎉
28 | - Instant Image Generation Using Pollinations AI 💙
29 | - Auto Fallback To Backup Api If Needed ❄️
30 | - Mobile Friendly & Fully Responsive 📱
31 | - 100% Free To Use ✅
32 |
33 | ---
34 |
35 | ### 🛠️ Tech Stack
36 |
37 | - **Tool**: [Pollinations AI](https://pollinations.ai/)
38 | - **Hosting**: [Vercel](https://vercel.com/)
39 | - **Frontend**: Vanilla JS, HTML, CSS
40 |
41 | ---
42 |
43 | ### 🧾 Credits
44 |
45 | | Role | Name |
46 | |------------|---------------|
47 | | 👩💻 Developer | [Murali 💻](https://Murali.vercel.app) |
48 | | 🚀 Hosting | Vercel |
49 | | 🎨 Tool | Pollinations AI |
50 |
51 | ---
52 |
53 |
54 |
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const generateBtn = document.querySelector('.generate-btn');
2 | const promptInput = document.getElementById('promptInput');
3 | const imageContainer = document.getElementById('imageContainer');
4 | const popup = document.getElementById('popup');
5 |
6 | function showPopup(message) {
7 | popup.textContent = message;
8 | popup.style.display = 'block';
9 | setTimeout(() => {
10 | popup.style.display = 'none';
11 | }, 3000);
12 | }
13 |
14 |
15 | function getPollinationsImageUrl(prompt) {
16 | const base = "https://image.pollinations.ai/prompt/";
17 | const params = new URLSearchParams({
18 | width: 1080,
19 | height: 1080,
20 | nologo: "true",
21 | private: "true",
22 | seed: 42,
23 | enhance: "true",
24 | model: "flux-pro"
25 | });
26 | return `${base}${encodeURIComponent(prompt)}?${params.toString()}`;
27 | }
28 |
29 | generateBtn.addEventListener('click', async () => {
30 | const prompt = promptInput.value.trim();
31 | if (!prompt) {
32 | showPopup("Please enter a prompt!");
33 | return;
34 | }
35 |
36 | imageContainer.innerHTML = `
37 |
38 |
✨
39 |
Generating ...
40 |
✨
41 |
42 | `;
43 |
44 |
45 | try {
46 | const pollinationsUrl = getPollinationsImageUrl(prompt);
47 | const pollinationsResponse = await fetch(pollinationsUrl);
48 |
49 | if (pollinationsResponse.ok) {
50 | const blob = await pollinationsResponse.blob();
51 | const imageUrl = URL.createObjectURL(blob);
52 | imageContainer.innerHTML = `
`;
53 | return;
54 | } else {
55 | throw new Error("Pollinations API failed.");
56 | }
57 | } catch (err) {
58 | console.warn("Pollinations failed:", err.message);
59 | }
60 |
61 |
62 | try {
63 | const duckUrl = `https://imgen.duck.mom/prompt/${encodeURIComponent(prompt)}`;
64 | const response = await fetch(duckUrl);
65 |
66 | if (!response.ok) {
67 | throw new Error("DuckMom API failed.");
68 | }
69 |
70 | const blob = await response.blob();
71 | const imageUrl = URL.createObjectURL(blob);
72 | imageContainer.innerHTML = `
`;
73 | } catch (err) {
74 | console.warn("DuckMom API failed:", err.message);
75 | imageContainer.innerHTML = "";
76 | showPopup("Oops! Image generation failed.");
77 | }
78 | });
79 |
--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
1 | var gradientColorsArray = new Array(
2 | "#a8edea", // soft sky blue
3 | "#fed6e3", // soft pink clouds
4 | "#fceabb", // warm sunlight
5 | "#d4fc79", // grassy green
6 | "#96e6a1", // calm leaf green
7 | "#84fab0", // mint freshness
8 | "#a6c0fe", // cool sky fade
9 | "#f9f586", // bright morning sun
10 | "#ffecd2", // soft golden hour
11 | "#f6d365", // mellow sunshine
12 | "#c2ffd8", // soft mist
13 | "#ff9a9e", // pink horizon
14 | "#fbc2eb", // dreamy pink mist
15 | "#cfd9df", // morning haze
16 | "#e0c3fc", // lavender glow
17 | "#c2e9fb", // baby blue sky
18 | "#fdfbfb", // pure cloud white
19 | "#ffeaa7", // sun-kissed yellow
20 | "#b6fcd5", // refreshing spring
21 | "#dff9fb", // clear morning
22 | "#f3e5f5", // light lilac
23 | "#fce38a", // soft pastel yellow
24 | "#ffdde1", // warm fluffy pink
25 | "#e0f7fa", // fresh blue breeze
26 | "#eaffd0", // garden dew green
27 | "#fcd5ce" // blush pink morning
28 | );
29 |
30 | var gradientTransitionStep = 0;
31 |
32 |
33 | var gradientColorIndices = [0, 1, 2, 3];
34 |
35 |
36 | var gradientTransitionSpeed = 0.004;
37 |
38 | function updateGradientBackground() {
39 | if (typeof jQuery === 'undefined') return;
40 |
41 |
42 | var currentLeftColorIndex = gradientColorIndices[0];
43 | var nextLeftColorIndex = gradientColorIndices[1];
44 | var currentRightColorIndex = gradientColorIndices[2];
45 | var nextRightColorIndex = gradientColorIndices[3];
46 |
47 | var currentLeftColorHex = gradientColorsArray[currentLeftColorIndex];
48 | var nextLeftColorHex = gradientColorsArray[nextLeftColorIndex];
49 | var currentRightColorHex = gradientColorsArray[currentRightColorIndex];
50 | var nextRightColorHex = gradientColorsArray[nextRightColorIndex];
51 |
52 | var inverseGradientStep = 1 - gradientTransitionStep;
53 |
54 | function hexToRgb(hex) {
55 | var r = parseInt(hex.slice(1, 3), 16);
56 | var g = parseInt(hex.slice(3, 5), 16);
57 | var b = parseInt(hex.slice(5, 7), 16);
58 | return [r, g, b];
59 | }
60 |
61 | var [rLeftStart, gLeftStart, bLeftStart] = hexToRgb(currentLeftColorHex);
62 | var [rLeftEnd, gLeftEnd, bLeftEnd] = hexToRgb(nextLeftColorHex);
63 | var [rRightStart, gRightStart, bRightStart] = hexToRgb(currentRightColorHex);
64 | var [rRightEnd, gRightEnd, bRightEnd] = hexToRgb(nextRightColorHex);
65 |
66 | var redLeft = Math.round(inverseGradientStep * rLeftStart + gradientTransitionStep * rLeftEnd);
67 | var greenLeft = Math.round(inverseGradientStep * gLeftStart + gradientTransitionStep * gLeftEnd);
68 | var blueLeft = Math.round(inverseGradientStep * bLeftStart + gradientTransitionStep * bLeftEnd);
69 | var leftGradientColor = "rgb(" + redLeft + "," + greenLeft + "," + blueLeft + ")";
70 |
71 | var redRight = Math.round(inverseGradientStep * rRightStart + gradientTransitionStep * rRightEnd);
72 | var greenRight = Math.round(inverseGradientStep * gRightStart + gradientTransitionStep * gRightEnd);
73 | var blueRight = Math.round(inverseGradientStep * bRightStart + gradientTransitionStep * bRightEnd);
74 | var rightGradientColor = "rgb(" + redRight + "," + greenRight + "," + blueRight + ")";
75 |
76 |
77 | $('#gradient').css({
78 | background: "-webkit-gradient(linear, left top, right top, from(" + leftGradientColor + "), to(" + rightGradientColor + "))"
79 | }).css({
80 | background: "-moz-linear-gradient(left, " + leftGradientColor + " 0%, " + rightGradientColor + " 100%)"
81 | });
82 |
83 | gradientTransitionStep += gradientTransitionSpeed;
84 | if (gradientTransitionStep >= 1) {
85 | gradientTransitionStep %= 1;
86 | gradientColorIndices[0] = gradientColorIndices[1];
87 | gradientColorIndices[2] = gradientColorIndices[3];
88 |
89 | gradientColorIndices[1] = (gradientColorIndices[1] + Math.floor(1 + Math.random() * (gradientColorsArray.length - 1))) % gradientColorsArray.length;
90 | gradientColorIndices[3] = (gradientColorIndices[3] + Math.floor(1 + Math.random() * (gradientColorsArray.length - 1))) % gradientColorsArray.length;
91 | }
92 | }
93 |
94 |
95 | setInterval(updateGradientBackground, 50); // It Means 10 milliseconds
96 |
97 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Chiku-Ai Image Generator
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
×
45 |
About Chiku Ai
46 |
47 | - ⚡ Fast and easy to use
48 | - 🖼️ HD quality anime-style images
49 | - ⬇️ Instant image download support
50 | - 🧠 Smart prompt handling with kawaii results
51 | - 🛡️ Anti-NSFW safe environment
52 | - 💖 Designed with love & cuteness in mind
53 | - 📱 Fully responsive on all devices
54 |
55 |
56 |
👩🎨 Powered by: Anime Image Generator Model
57 |
🌐 Hosting: Vercel with blazing speed
58 |
👨💻 Developer: Murali
59 |
60 | 🌟 Wanna Explore My More Projects?
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |

69 |
70 |
71 |
72 |
73 | ×
74 |
75 |
76 |
77 |
78 |
79 |
82 |
83 |
84 |
85 |
86 |
87 |
93 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | scroll-behavior: smooth;
8 | }
9 |
10 | body {
11 | font-family: serif;
12 | display: flex;
13 | flex-direction: column;
14 | justify-content: flex-start;
15 | align-items: center;
16 | background-color: #081b29;
17 | min-height: 100vh;
18 | width: 100%;
19 | overflow-x: hidden;
20 | }
21 |
22 | #gradient {
23 | position: fixed;
24 | top: 0;
25 | left: 0;
26 | width: 100%;
27 | height: 100%;
28 | z-index: -3;
29 | }
30 |
31 | .main-content {
32 | flex: 1;
33 | width: 100%;
34 | display: flex;
35 | flex-direction: column;
36 | align-items: center;
37 | }
38 | .logo-container {
39 | width: 100%;
40 | text-align: center;
41 | margin-top: 20px;
42 | }
43 |
44 | .logo-image {
45 | width: 200px;
46 | max-width: 90%;
47 | height: auto;
48 | transition: transform 0.3s ease;
49 | }
50 |
51 | .logo-image:hover {
52 | transform: scale(1.05);
53 | }
54 |
55 |
56 | .prompt-section {
57 | display: flex;
58 | flex-direction: column;
59 | align-items: center;
60 | margin-top: 40px;
61 | width: 90%;
62 | }
63 |
64 | .input-wrapper {
65 | position: relative;
66 | width: 90%;
67 | max-width: 600px;
68 | }
69 |
70 | .input-wrapper input {
71 | width: 100%;
72 | padding: 15px 45px 15px 20px;
73 | font-size: 1rem;
74 | border: 2px solid #fbc2eb;
75 | border-radius: 15px;
76 | outline: none;
77 | transition: all 0.3s ease;
78 | background: #fff9fb;
79 | box-shadow: 0 4px 10px rgba(255, 192, 203, 0.2);
80 | }
81 |
82 | .input-wrapper input:focus {
83 | border-color: #ff9a9e;
84 | box-shadow: 0 0 15px rgba(255, 154, 158, 0.5);
85 | transform: scale(1.02);
86 | }
87 |
88 | .clear-btn {
89 | position: absolute;
90 | right: 15px;
91 | top: 50%;
92 | transform: translateY(-50%);
93 | font-size: 1.2rem;
94 | color: #ff6f91;
95 | cursor: pointer;
96 | user-select: none;
97 | transition: color 0.2s ease;
98 | }
99 |
100 | .clear-btn:hover {
101 | color: #ff3d68;
102 | }
103 |
104 | .generate-btn {
105 | margin-top: 20px;
106 | padding: 12px 30px;
107 | font-size: 1rem;
108 | font-weight: bold;
109 | font-family: 'Orbitron', sans-serif;
110 | color: white;
111 | background: linear-gradient(135deg, #f6d365, #fda085);
112 | border: none;
113 | border-radius: 25px;
114 | cursor: pointer;
115 | transition: all 0.3s ease;
116 | box-shadow: 0 6px 20px rgba(253, 160, 133, 0.4);
117 | }
118 |
119 | .generate-btn:hover {
120 | transform: translateY(-3px);
121 | box-shadow: 0 10px 25px rgba(253, 160, 133, 0.6);
122 | }
123 |
124 | .image-container {
125 | margin-top: 30px;
126 | text-align: center;
127 | }
128 |
129 | .image-container img {
130 | max-width: 90%;
131 | border-radius: 20px;
132 | box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
133 | }
134 |
135 | .popup {
136 | display: none;
137 | position: fixed;
138 | top: 20px;
139 | left: 50%;
140 | transform: translateX(-50%);
141 | background: #ff6f91;
142 | color: white;
143 | padding: 10px 20px;
144 | border-radius: 10px;
145 | font-weight: bold;
146 | z-index: 9999;
147 | animation: fadein 0.3s ease;
148 | }
149 |
150 | @keyframes fadein {
151 | from { opacity: 0; top: 0; }
152 | to { opacity: 1; top: 20px; }
153 | }
154 | .generating-box {
155 | display: flex;
156 | justify-content: center;
157 | align-items: center;
158 | gap: 10px;
159 | font-family: 'Poppins', sans-serif;
160 | font-size: 1.2rem;
161 | font-weight: 500;
162 | color: #ff9a9e;
163 | margin-top: 20px;
164 | animation: pulseText 1.5s ease-in-out infinite;
165 | }
166 |
167 | .generating-text {
168 | background: linear-gradient(90deg, #f7971e, #ffd200, #ff6a00, #ffb347);
169 | -webkit-background-clip: text;
170 | -webkit-text-fill-color: transparent;
171 | }
172 | .sparkle {
173 | font-size: 1.5rem;
174 | animation: sparkleTwinkle 1s infinite alternate;
175 | }
176 |
177 | @keyframes pulseText {
178 | 0%, 100% { transform: scale(1); opacity: 1; }
179 | 50% { transform: scale(1.05); opacity: 0.8; }
180 | }
181 |
182 | @keyframes sparkleTwinkle {
183 | 0% { opacity: 0.3; transform: rotate(0deg) scale(1); }
184 | 100% { opacity: 1; transform: rotate(20deg) scale(1.2); }
185 | }
186 |
187 | /*
188 | .download-btn {
189 | margin-top: 20px;
190 | padding: 12px 28px;
191 | font-size: 1rem;
192 | font-weight: bold;
193 | background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
194 | color: #fff;
195 | border: none;
196 | border-radius: 30px;
197 | cursor: pointer;
198 | box-shadow: 0 8px 20px rgba(161, 196, 253, 0.5);
199 | transition: all 0.3s ease;
200 | font-family: 'Poppins', sans-serif;
201 | }
202 |
203 | .download-btn:hover {
204 | background: linear-gradient(135deg, #ffecd2, #fcb69f);
205 | transform: translateY(-2px) scale(1.05);
206 | box-shadow: 0 12px 25px rgba(252, 182, 159, 0.6);
207 | }
208 | */
209 |
210 | .info-btn {
211 | position: fixed;
212 | top: 15px;
213 | left: 15px;
214 |
215 | padding: 10px 12px;
216 | font-size: 24px;
217 | border-radius: 50%;
218 | cursor: pointer;
219 |
220 | transition: transform 0.3s ease, background 0.3s;
221 | z-index: 1000;
222 | color: black;
223 | }
224 |
225 | .info-btn:hover {
226 | transform: scale(1.2) rotate(10deg);
227 |
228 | }
229 |
230 | .overlay {
231 | position: fixed;
232 | top: 0;
233 | left: 0;
234 | width: 100%;
235 | height: 100%;
236 | background: rgba(0, 0, 0, 0.6);
237 | backdrop-filter: blur(4px);
238 | display: flex;
239 | align-items: center;
240 | justify-content: center;
241 | z-index: 999;
242 | opacity: 0;
243 | pointer-events: none;
244 | transition: opacity 0.4s ease;
245 | }
246 |
247 | .overlay.active {
248 | opacity: 1;
249 | pointer-events: auto;
250 | }
251 |
252 | .info-box {
253 | background: rgba(255, 255, 255, 0.15);
254 | padding: 25px 30px;
255 | border-radius: 20px;
256 | color: white;
257 | width: 90%;
258 | max-width: 400px;
259 | text-align: center;
260 | box-shadow: 0 0 20px #fff4;
261 | position: relative;
262 | animation: fadeInUp 0.4s ease forwards;
263 | backdrop-filter: blur(10px);
264 | -webkit-backdrop-filter: blur(16px);
265 | border: 1px solid rgba(255,255,255,0.3);
266 | }
267 |
268 | @keyframes fadeInUp {
269 | 0% { transform: translateY(40px); opacity: 0; }
270 | 100% { transform: translateY(0); opacity: 1; }
271 | }
272 |
273 | .close-btn {
274 | position: absolute;
275 | top: 8px;
276 | right: 12px;
277 | font-size: 22px;
278 | cursor: pointer;
279 | color: #fff;
280 | }
281 |
282 | .info-box h2 {
283 | font-family: 'Cherry Bomb One', cursive;
284 | font-size: 2rem;
285 | background: linear-gradient(90deg, #ff9a9e, #fad0c4, #a1c4fd);
286 | -webkit-background-clip: text;
287 | -webkit-text-fill-color: transparent;
288 | margin-bottom: 15px;
289 | text-shadow: 0 2px 4px rgba(0,0,0,0.2);
290 | }
291 |
292 |
293 | .info-box ul li {
294 | font-family: 'Nunito Sans', sans-serif;
295 | font-size: 1rem;
296 | margin: 8px 0;
297 | position: relative;
298 | padding-left: 25px;
299 | color: #fff;
300 | }
301 |
302 | .info-box ul li::before {
303 | content: '⭐';
304 | position: absolute;
305 | left: 0;
306 | top: 0;
307 | font-size: 1.1rem;
308 | animation: starTwinkle 1.5s infinite alternate;
309 | }
310 |
311 | @keyframes starTwinkle {
312 | from { opacity: 0.3; transform: scale(1); }
313 | to { opacity: 1; transform: scale(1.2); }
314 | }
315 |
316 |
317 | .info-box hr {
318 | border: 0;
319 | height: 1px;
320 | background: rgba(255,255,255,0.4);
321 | margin: 20px 0;
322 | }
323 |
324 |
325 | .info-box p {
326 | font-family: 'Nunito Sans', sans-serif;
327 | font-size: 0.95rem;
328 | color: #e0e0e0;
329 | }
330 |
331 | .info-box p strong {
332 | font-weight: 600;
333 | color: #fff;
334 | background: linear-gradient(90deg, #ffe259, #ffa751);
335 | -webkit-background-clip: text;
336 | -webkit-text-fill-color: transparent;
337 | }
338 |
339 |
340 |
341 |
342 | .footer {
343 | backdrop-filter: blur(12px);
344 | background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(10, 10, 25, 0.8));
345 | color: #ffffff;
346 | text-align: center;
347 | padding: 20px 0;
348 | font-family: 'Orbitron', sans-serif;
349 | font-size: 13px;
350 | width: 100%;
351 | border-top: 1px solid rgba(255, 255, 255, 0.1);
352 | box-shadow: 0 -2px 20px rgba(255, 255, 255, 0.05);
353 | margin-top: 50px;
354 | }
355 |
356 |
357 | .footer-content p {
358 | margin: 4px 0;
359 | letter-spacing: 1px;
360 | text-shadow: 0 0 2px #00ffff, 0 0 5px #00ffff60;
361 | }
362 |
363 | @keyframes glowFooter {
364 | 0% {
365 | transform: translateY(100%);
366 | opacity: 0;
367 | }
368 | 100% {
369 | transform: translateY(0);
370 | opacity: 1;
371 | }
372 | }
373 |
374 | .explore-btn {
375 | display: inline-block;
376 | margin-top: 20px;
377 | padding: 12px 25px;
378 | background: linear-gradient(135deg, #00f5a0, #00d9f5);
379 | color: crimson;
380 | font-family: 'Orbitron', sans-serif;
381 | font-weight: bold;
382 | text-decoration: none;
383 | font-size: 14px;
384 | border-radius: 30px;
385 | box-shadow: 0 8px 16px rgba(0, 245, 160, 0.3);
386 | transition: all 0.3s ease;
387 | position: relative;
388 | overflow: hidden;
389 | }
390 |
391 | .explore-btn::before {
392 | content: "";
393 | position: absolute;
394 | top: 0;
395 | left: -100%;
396 | width: 100%;
397 | height: 100%;
398 | background: rgba(255, 255, 255, 0.2);
399 | transform: skewX(-45deg);
400 | transition: 0.5s;
401 | }
402 |
403 | .explore-btn:hover::before {
404 | left: 100%;
405 | }
406 |
407 | .explore-btn:hover {
408 | transform: translateY(-2px);
409 | box-shadow: 0 10px 20px rgba(0, 245, 160, 0.4);
410 | }
411 |
--------------------------------------------------------------------------------