Skip to content

Bash charector hover effect on button [hacktoberfest] #190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Bash charector hover effect on button [hacktoberfest] #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1f90253
feat: Add bash-style hover effect to buttons
ravi0900 Oct 18, 2025
f88de67
feat: Implement fire-like button hover effect and remove old CSS
ravi0900 Oct 18, 2025
1df5141
feat: Implement continuous cmatrix-style hover effect for buttons
ravi0900 Oct 18, 2025
3825eab
feat: Add rainbow colors to particle effect
ravi0900 Oct 18, 2025
05731c5
Delete effects.css
ravi0900 Oct 18, 2025
d3df783
Update style.css
ravi0900 Oct 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 62 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
</svg>
</a>
<a href="#download"
class="relative z-40 inline-block w-auto h-full px-5 py-3 text-sm font-bold leading-none text-white transition-all transition duration-100 duration-300 bg-gray-900 rounded shadow-md fold-bold lg:bg-white lg:text-gray-600 sm:w-full lg:shadow-none hover:shadow-xl">Download
class="relative z-40 inline-block w-auto h-full px-5 py-3 text-sm font-bold leading-none text-white transition-all transition duration-100 duration-300 bg-gray-900 rounded shadow-md fold-bold lg:bg-white lg:text-gray-600 sm:w-full lg:shadow-none hover:shadow-xl btn-hover-effect">Download
</a>
<svg class="absolute top-0 left-0 hidden w-screen max-w-3xl -mt-64 -ml-12 lg:block"
viewBox="0 0 818 815" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
Expand Down Expand Up @@ -124,7 +124,7 @@ <h1 class="relative mb-4 text-3xl font-black leading-tight text-gray-900 sm:text
<p class="pr-0 mb-8 text-base text-gray-600 sm:text-lg xl:text-xl lg:pr-20">Are you ready to start your
adventure and start writing awesome Bash scripts?</p>
<a href="#download"
class="relative self-start inline-block w-auto px-8 py-4 mx-auto mt-0 text-base font-bold text-white bg-gray-900 hover:bg-gray-700 border-t border-gray-200 rounded-md shadow-xl sm:mt-1 fold-bold lg:mx-0">Free Download
class="relative self-start inline-block w-auto px-8 py-4 mx-auto mt-0 text-base font-bold text-white bg-gray-900 hover:bg-gray-700 border-t border-gray-200 rounded-md shadow-xl sm:mt-1 fold-bold lg:mx-0 btn-hover-effect">Free Download
</a>
<!-- Sponsors with section -->
<div class="flex-col hidden mt-12 sm:flex lg:mt-24">
Expand Down Expand Up @@ -216,7 +216,7 @@ <h5 class="mb-3 text-3xl font-extrabold leading-none sm:text-4xl lg:text-5xl">
This is an open-source introduction to Bash scripting ebook that will help you learn the basics of Bash scripting and start writing awesome Bash scripts that will help you automate your daily SysOps, DevOps, and Dev tasks.
</p>
<div class="flex items-center">
<a href="#download" type="submit" class="inline-flex items-center justify-center h-12 px-6 mr-6 font-medium tracking-wide text-white transition duration-200 bg-gray-900 rounded-lg hover:bg-gray-700 focus:shadow-outline focus:outline-none">
<a href="#download" type="submit" class="inline-flex items-center justify-center h-12 px-6 mr-6 font-medium tracking-wide text-white transition duration-200 bg-gray-900 rounded-lg hover:bg-gray-700 focus:shadow-outline focus:outline-none btn-hover-effect">
Free Download
</a>
</div>
Expand Down Expand Up @@ -408,7 +408,7 @@ <h5 class="pb-2 text-xl font-bold leading-6 text-gray-400">Dark Theme</h5>
<p class="mt-1 mb-4 text-base leading-6 text-gray-500">
Download the Dark theme of the Introduction to Bash Scripting eBook
</p>
<a href="https://github.com/bobbyiliev/introduction-to-bash-scripting/raw/main/ebook/en/export/introduction-to-bash-scripting-dark.pdf" class="px-4 py-2 font-semibold text-gray-200 bg-gray-500 border border-green-700 rounded shadow btn btn-secundary hover:bg-gray-600"> Free Download</a>
<a href="https://github.com/bobbyiliev/introduction-to-bash-scripting/raw/main/ebook/en/export/introduction-to-bash-scripting-dark.pdf" class="px-4 py-2 font-semibold text-gray-200 bg-gray-500 border border-green-700 rounded shadow btn btn-secundary hover:bg-gray-600 btn-hover-effect"> Free Download</a>
</div>
</div>

Expand All @@ -428,7 +428,7 @@ <h5 class="pb-2 text-xl font-bold leading-6 text-gray-600">Light Theme</h5>
<p class="mt-1 mb-4 text-base leading-6 text-gray-500">
Download the Light theme of the Introduction to Bash Scripting eBook
</p>
<a href="https://github.com/bobbyiliev/introduction-to-bash-scripting/raw/main/ebook/en/export/introduction-to-bash-scripting-light.pdf" class="px-4 py-2 font-semibold text-white bg-blue-500 border border-green-700 rounded shadow btn btn-secundary hover:bg-blue-600"> Free Download</a>
<a href="https://github.com/bobbyiliev/introduction-to-bash-scripting/raw/main/ebook/en/export/introduction-to-bash-scripting-light.pdf" class="px-4 py-2 font-semibold text-white bg-blue-500 border border-green-700 rounded shadow btn btn-secundary hover:bg-blue-600 btn-hover-effect"> Free Download</a>
</div>
</div>
</div>
Expand All @@ -447,7 +447,7 @@ <h5 class="pb-2 text-xl font-bold leading-6 text-gray-600">Light Theme</h5>
<h4 class="pb-0 mb-0 text-lg font-semibold mb-md-0">Enjoying the free eBook?</h4>
<p class="mb-0 text-gray-700">Support this opensource project by staring it on GitHub!</p>
</div>
<a href="https://github.com/bobbyiliev/introduction-to-bash-scripting" class="px-4 py-2 font-semibold text-white bg-green-500 border border-green-700 rounded shadow btn btn-secundary hover:bg-green-600">
<a href="https://github.com/bobbyiliev/introduction-to-bash-scripting" class="px-4 py-2 font-semibold text-white bg-green-500 border border-green-700 rounded shadow btn btn-secundary hover:bg-green-600 btn-hover-effect">
<svg class="inline-block h-8 mr-4 text-white duration-150 cursor-pointer fill-current transition-color hover:text-gray-00" viewBox="0 0 2350 2315" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1"></g>
<g>
Expand Down Expand Up @@ -525,6 +525,62 @@ <h4 class="pb-0 mb-0 text-lg font-semibold mb-md-0">Enjoying the free eBook?</h4
</div>
</footer>

<script>
document.addEventListener('DOMContentLoaded', () => {
const buttons = document.querySelectorAll('.btn-hover-effect');
const chars = ['$', '#', '~', '/', '>', '_', '0', '1'];
const colors = ['#ff6b6b', '#f94d6a', '#f8c291', '#82ccdd', '#6a89cc', '#b71540', '#39ff14', '#f0932b', '#eb4d4b', '#6ab04c', '#e056fd', '#be2edd'];

const createParticle = (rect) => {
const particle = document.createElement('span');
particle.textContent = chars[Math.floor(Math.random() * chars.length)];
particle.classList.add('fire-particle');

const color = colors[Math.floor(Math.random() * colors.length)];
particle.style.color = color;
particle.style.textShadow = `0 0 5px ${color}, 0 0 10px ${color}`;

document.body.appendChild(particle);

const x = rect.left + Math.random() * rect.width;
const y = rect.top + Math.random() * rect.height;

particle.style.top = `${y}px`;
particle.style.left = `${x}px`;

const translateX = (Math.random() - 0.5) * 150;
const translateY = 100 + Math.random() * 100; // Fall down

particle.style.setProperty('--translateX', `${translateX}px`);
particle.style.setProperty('--translateY', `${translateY}px`);

setTimeout(() => {
particle.remove();
}, 1500); // Match animation duration
};

buttons.forEach(button => {
let intervalId = null;
button.addEventListener('mouseenter', e => {
const rect = e.target.getBoundingClientRect();
if (!intervalId) {
intervalId = setInterval(() => {
for (let i = 0; i < 2; i++) {
createParticle(rect);
}
}, 50);
}
});

button.addEventListener('mouseleave', () => {
if (intervalId) {
clearInterval(intervalId);
intervalId = null;
}
});
});
});
</script>
<script src="index.js"></script>

</body>
Expand Down
17 changes: 17 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,21 @@ html {
background: #a0aec0;
}

.fire-particle {
position: fixed;
pointer-events: none;
font-weight: bold;
font-size: 1.2rem;
animation: floatEffect 1.5s linear forwards;
z-index: 9999;
transform: translate(-50%, -50%);
}

@keyframes floatEffect {
to {
opacity: 0;
transform: translate(calc(-50% + var(--translateX)), calc(-50% + var(--translateY)));
}
}

/* Css is same for both the html file index.html and training.html */