mirror of
https://github.com/adam-benyekkou/my_portfolio.git
synced 2026-01-15 20:20:09 +00:00
150 lines
2.9 KiB
CSS
150 lines
2.9 KiB
CSS
.button-custom {
|
|
cursor: pointer;
|
|
background-color: var(--color-nier-mid);
|
|
color: var(--color-nier-dark);
|
|
position: relative;
|
|
border: 1px solid transparent;
|
|
border-left: none;
|
|
border-right: none;
|
|
overflow: hidden;
|
|
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.button-custom::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 3px; /* Space from top border */
|
|
bottom: 3px; /* Space from bottom border */
|
|
width: 0;
|
|
height: auto; /* This makes it respect top and bottom values */
|
|
background-color: var(--color-nier-dark);
|
|
transition: width 0.2s ease;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Normal hover/focus state - keep your original behavior */
|
|
.button-custom:hover,
|
|
.button-custom:focus {
|
|
color: var(--color-nier-text-light);
|
|
background-color: transparent;
|
|
border-color: var(--color-nier-dark);
|
|
}
|
|
|
|
.button-custom:hover::before,
|
|
.button-custom:focus::before {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Add NieR-style glitch effects on hover */
|
|
.button-custom::after {
|
|
content: attr(data-label); /* Use the button's text from data-label attribute */
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-nier-text-light);
|
|
opacity: 0;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.button-custom:hover::after {
|
|
animation: nier-button-glitch 0.6s ease forwards;
|
|
}
|
|
|
|
/* Add subtle scan line on hover */
|
|
.button-custom .scan-line {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: var(--color-nier-text-light);
|
|
opacity: 0;
|
|
z-index: 3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.button-custom:hover .scan-line {
|
|
animation: nier-button-scan 0.3s ease forwards;
|
|
}
|
|
|
|
/* The glitch effect animation */
|
|
@keyframes nier-button-glitch {
|
|
0%, 100% {
|
|
opacity: 0;
|
|
transform: translateX(0);
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
10% {
|
|
opacity: 0.2;
|
|
transform: translateX(-2px);
|
|
clip-path: inset(10% 0 80% 0);
|
|
}
|
|
12% {
|
|
opacity: 0;
|
|
transform: translateX(0);
|
|
}
|
|
20% {
|
|
opacity: 0.2;
|
|
transform: translateX(2px);
|
|
clip-path: inset(30% 0 50% 0);
|
|
}
|
|
22% {
|
|
opacity: 0;
|
|
transform: translateX(0);
|
|
}
|
|
30% {
|
|
opacity: 0.1;
|
|
transform: translateX(-1px);
|
|
clip-path: inset(50% 0 20% 0);
|
|
}
|
|
32% {
|
|
opacity: 0;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* The scan line animation */
|
|
@keyframes nier-button-scan {
|
|
0% {
|
|
opacity: 0.5;
|
|
left: -100%;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
/* Add a brief effect on button click */
|
|
.button-custom:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.button-custom:active::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
opacity: 0;
|
|
animation: nier-button-flash 0.2s ease;
|
|
}
|
|
|
|
@keyframes nier-button-flash {
|
|
0% {
|
|
opacity: 0.2;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|