35 lines
1018 B
CSS
35 lines
1018 B
CSS
/* Button Size Classes */
|
|
@layer components {
|
|
.btn-base {
|
|
@apply overflow-hidden relative inline-flex items-center justify-center font-medium cursor-pointer
|
|
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-white/10 before:rounded-lg
|
|
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-lg after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
|
|
/* 기본 크기: size-medium */
|
|
px-10 h-14 text-base rounded-lg;
|
|
}
|
|
.btn-base:hover {
|
|
@apply after:opacity-20;
|
|
}
|
|
.btn-base:disabled {
|
|
@apply cursor-default
|
|
after:bg-[var(--text-color)] after:opacity-20 after:z-[2];
|
|
}
|
|
|
|
.size-large {
|
|
@apply px-10 h-16 text-lg;
|
|
}
|
|
|
|
.size-medium {
|
|
@apply px-10 h-14 text-base;
|
|
}
|
|
|
|
.size-small {
|
|
@apply px-10 h-12 text-sm;
|
|
}
|
|
|
|
.size-extra-small {
|
|
@apply before:rounded after:rounded
|
|
px-6 h-10 text-sm rounded;
|
|
}
|
|
}
|