Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-07 13:15:17 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

💅 style(btn): hover animation

Browse Source
This commit is contained in:
Eshan Roy
2024-11-07 05:59:31 +05:30
parent 9284934b67
commit 5b57242ce7
2 changed files with 66 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -62,15 +62,15 @@
Designed to be efficient in its use of system resources, making it ideal for older hardware or devices with limited resources.
Emphasizes minimalism and user-centric design, and it also focuses on penetration testing.
</p>
<div class="cta-buttons">
<a href="#" class="btn btn-primary">
<div class="cta-buttons" align="center">
<a href="#" class="btn glow-on-hover">
Download
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-download" viewBox="0 0 16 16">
<path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383"/>
<path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708z"/>
</svg>
</a>
<a href="#documentation" class="btn btn-secondary">
<a href="#documentation" class="btn glow-on-hover">
Documentation
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-text" viewBox="0 0 16 16">
<path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5"/>
@@ -117,7 +117,7 @@
<img src="/placeholder.svg?height=64&width=64" alt="Maltego" class="tool-icon">
<img src="/placeholder.svg?height=64&width=64" alt="Hashcat" class="tool-icon">
</div>
<a href="#tools" class="btn btn-secondary">Find out all about Kali's Tools</a>
<a href="#tools" class="btn glow-on-hover">Find out all about Kali's Tools</a>
</section>
<section class="kali-everywhere">

63
style.css
View File

@@ -16,6 +16,7 @@ body {
background-color: var(--dark-blue);
color: white;
line-height: 1.6;
justify-content: center;
}
.navbar {
@@ -66,7 +67,7 @@ a {
text-decoration: none;
font-size: 0.9rem;
text-transform: uppercase;
font-weight: 500;
font-weight: 800;
}
.hero {
@@ -114,6 +115,66 @@ a {
gap: 1rem;
}
.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
.btn {
padding: 0.8rem 1.5rem;
border-radius: 4px;