99 lines
2.2 KiB
Text
99 lines
2.2 KiB
Text
|
---
|
||
|
|
export interface Props {
|
||
|
|
href?: string;
|
||
|
|
variant?: 'outline' | 'primary';
|
||
|
|
size?: 'sm' | 'md' | 'lg';
|
||
|
|
class?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const {
|
||
|
|
href = '/login',
|
||
|
|
variant = 'outline',
|
||
|
|
size = 'md',
|
||
|
|
class: className = '',
|
||
|
|
}: Props = Astro.props;
|
||
|
|
|
||
|
|
const baseClasses = 'login-btn inline-flex items-center justify-center font-semibold transition-all duration-300 rounded-md cursor-pointer';
|
||
|
|
|
||
|
|
const variantClasses = {
|
||
|
|
primary: 'bg-primary text-white hover:bg-primary-dark',
|
||
|
|
outline: 'border-2 border-[#1e3050] text-[#1e3050] hover:bg-[#1e3050] hover:text-white',
|
||
|
|
};
|
||
|
|
|
||
|
|
const sizeClasses = {
|
||
|
|
sm: 'px-3 py-1.5 text-sm',
|
||
|
|
md: 'px-4 py-2 text-base',
|
||
|
|
lg: 'px-6 py-3 text-lg',
|
||
|
|
};
|
||
|
|
|
||
|
|
const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
|
||
|
|
---
|
||
|
|
|
||
|
|
<a href={href} class={classes}>
|
||
|
|
<div class="login-content">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="login-icon">
|
||
|
|
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
||
|
|
<polyline points="10 17 15 12 10 7"></polyline>
|
||
|
|
<line x1="15" y1="12" x2="3" y2="12"></line>
|
||
|
|
</svg>
|
||
|
|
<span class="login-text">Вход</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.login-btn {
|
||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-content {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-btn::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: -100%;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: linear-gradient(
|
||
|
|
90deg,
|
||
|
|
transparent,
|
||
|
|
rgba(255, 255, 255, 0.3),
|
||
|
|
transparent
|
||
|
|
);
|
||
|
|
transition: left 0.5s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-btn:hover::before {
|
||
|
|
left: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-btn:hover {
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-btn:active {
|
||
|
|
transform: translateY(0);
|
||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-icon {
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-btn:hover .login-icon {
|
||
|
|
transform: translateX(3px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-text {
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
</style>
|