음악/오디오를 위한 Neomorphic Neon Pagination
뉴모픽 스타일과 밝은 네온/일렉트릭 색상으로 설계된 반응형 페이지 매김 구성 요소로 음악 스트리밍 및 오디오 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-black p-4">
<nav class="flex items-center justify-center space-x-2 p-3 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800
bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6),5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(50,50,50,0.3)]
shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,180,0.7),5px_5px_10px_rgba(0,0,0,0.1),-5px_-5px_10px_rgba(255,255,255,0.8)]
max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl duration-300 ease-in-out">
<!-- Previous Button -->
<a href="#" class="neumorphic-button group">
<svg class="h-5 w-5 text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 transition-colors duration-200"
fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Previous</span>
</a>
<!-- Page Numbers / Current Page -->
<div class="flex space-x-2 sm:space-x-1 md:space-x-2">
<a href="#" class="neumorphic-button hidden sm:flex group">
<span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">1</span>
</a>
<a href="#" class="neumorphic-button hidden sm:flex group">
<span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">2</span>
</a>
<span class="relative inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 text-sm font-semibold
rounded-lg neumorphic-active
text-fuchsia-600 dark:text-cyan-500
shadow-lg dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6)]
shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,180,0.7)]
border border-fuchsia-400 dark:border-cyan-600
">
3
<span class="absolute inset-0 rounded-lg opacity-40 blur-sm
bg-gradient-to-br from-fuchsia-400 to-fuchsia-600
dark:from-cyan-400 dark:to-cyan-600"></span>
</span>
<a href="#" class="neumorphic-button hidden sm:flex group">
<span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">4</span>
</a>
<a href="#" class="neumorphic-button hidden md:flex group">
<span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">5</span>
</a>
<span class="text-fuchsia-500 dark:text-cyan-400 self-center hidden md:block">...</span>
<a href="#" class="neumorphic-button hidden md:flex group">
<span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">10</span>
</a>
</div>
<!-- Next Button -->
<a href="#" class="neumorphic-button group">
<svg class="h-5 w-5 text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 transition-colors duration-200"
fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Next</span>
</a>
</nav>
<style>
/* Base styles for the neumorphic button */
.neumorphic-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 0.8rem; /* Equivalent to px-3 py-1.5, slightly tweaked for visual balance */
font-size: 0.875rem; /* text-sm */
font-weight: 500; /* font-medium */
border-radius: 0.5rem; /* rounded-lg */
color: #9240F0; /* Default text color, will be overridden by specific color classes */
transition: all 0.2s ease-in-out;
cursor: pointer;
user-select: none;
position: relative;
overflow: hidden;
/* Neumorphic default shadow (light mode) */
background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1),
-2px -2px 5px rgba(255, 255, 255, 0.8),
inset 1px 1px 2px rgba(255, 255, 255, 0.7),
inset -1px -1px 2px rgba(180, 180, 180, 0.7);
border: 1px solid transparent; /* Subtle border for definition */
}
/* Neumorphic active/pressed state */
.neumorphic-button:active,
.neumorphic-button.neumorphic-active {
background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2),
inset -3px -3px 6px rgba(255, 255, 255, 0.7);
border-color: #fca0e5; /* Hot Pink */
}
/* Neumorphic hover state (light mode) */
.neumorphic-button:hover {
background: linear-gradient(145deg, #f5f5f5, #e5e5e5);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15),
-3px -3px 6px rgba(255, 255, 255, 0.9),
inset 1px 1px 2px rgba(255, 255, 255, 0.8),
inset -1px -1px 2px rgba(190, 190, 190, 0.8);
}
/* Dark mode for neumorphic button */
.dark .neumorphic-button {
background: linear-gradient(145deg, #2b2b2b, #1a1a1a);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6),
-2px -2px 5px rgba(30, 30, 30, 0.6),
inset 1px 1px 2px rgba(30, 30, 30, 0.7),
inset -1px -1px 2px rgba(0, 0, 0, 0.7);
border: 1px solid transparent; /* Subtle border for definition */
}
.dark .neumorphic-button:active,
.dark .neumorphic-button.neumorphic-active {
background: linear-gradient(145deg, #1a1a1a, #2b2b2b);
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.8),
inset -3px -3px 6px rgba(40, 40, 40, 0.8);
border-color: #00BCD4; /* Electric Blue */
}
.dark .neumorphic-button:hover {
background: linear-gradient(145deg, #1f1f1f, #2f2f2f);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8),
-3px -3px 6px rgba(40, 40, 40, 0.8),
inset 1px 1px 2px rgba(40, 40, 40, 0.8),
inset -1px -1px 2px rgba(0, 0, 0, 0.8);
}
</style>
</div>