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-06 20:55:18 +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

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;