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

Glassmorphism Buttons 컴포넌트

어스 톤을 사용하여 다크 모드의 반응형 포트폴리오 사이트를 사용하는 Glassmorphism 버튼

미리 보기

HTML 코드 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism Earth Tone Buttons</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .glass {
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px); /* Safari support */
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .dark .glass {
            background-color: rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body class="bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center p-8">

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

        <!-- Button 1: Primary Action -->
        <button class="glass text-stone-800 dark:text-stone-200 font-bold py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
            Explore Projects
        </button>

        <!-- Button 2: Secondary Action -->
        <button class="glass text-stone-700 dark:text-stone-300 font-semibold py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
            Download CV
        </button>

        <!-- Button 3: Contact -->
        <button class="glass text-stone-600 dark:text-stone-400 font-normal py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-300 focus:ring-opacity-50">
            Get in Touch
        </button>

        <!-- Button 4: View Details (Example with Icon) -->
        <button class="glass text-stone-800 dark:text-stone-200 font-bold py-4 px-8 rounded-lg shadow-lg transform transition duration-300 flex items-center justify-center hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            More Info
        </button>

         <!-- Button 5: Learn More -->
        <button class="glass text-stone-700 dark:text-stone-300 font-semibold py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
            Learn More About Me
        </button>

        <!-- Button 6: Hire Me -->
        <button class="glass text-stone-600 dark:text-stone-400 font-normal py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-300 focus:ring-opacity-50">
            Hire Me
        </button>

    </div>

</body>
</html>

관련 구성 요소

Glassmorphism Buttons 컴포넌트

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

열다

Buttons 구성 요소

다크 모드를 지원하는 반응형 버튼 구성 요소로, 전자 상거래에 적합하며 간단한 트라이어딕 색 구성표를 특징으로 합니다.

열다

Buttons 구성 요소

트라이어딕 색 구성표, 단순한 복잡성 및 다크 모드를 지원하는 반응형 디자인을 갖춘 레트로 빈티지 테마 버튼 구성 요소로 블로그 또는 콘텐츠 웹 사이트에 적합합니다.

열다