CCHub Logo CCHub Tailwind Collection
구성 요소 단추 Glassmorphism Buttons 컴포넌트

Glassmorphism Buttons 컴포넌트

파스텔 색상과 Tailwind CSS를 사용하는 다크 모드를 지원하는 간단하고 반응이 빠른 Glassmorphism 버튼 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-4">
    <button class="px-6 py-3 text-lg font-semibold text-white bg-pink-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-pink-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 1
    </button>
    <button class="px-6 py-3 text-lg font-semibold text-white bg-blue-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-blue-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 2
    </button>
  </div>
</div>

관련 구성 요소

Buttons 구성 요소

Neumorphism Buttons 포트폴리오 목적을 위한 단색 색 구성표가 있는 구성 요소, 어두운 테마 지원으로 반응합니다.

열다

Buttons 구성 요소

반응형 효과와 어두운 테마 지원을 특징으로 하는 레트로/빈티지 스타일의 버튼 구성 요소로, 80년대와 90년대 미학의 향수를 불러일으키도록 설계되었습니다.

열다

Buttons 구성 요소

작품이나 제품을 선보이는 포트폴리오를 위해 설계된 미니멀리스트 버튼 구성 요소로, Tailwind CSS를 사용하여 어두운 테마를 지원하는 생생한 색상과 반응형 디자인을 특징으로 합니다.

열다