组件 按钮 按钮组件

按钮组件

一个按钮组件,该组件设计为具有 3D 元素和鲜艳的色彩,适用于社交媒体界面,支持深色主题和响应式设计。

预览

HTML 代码

<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Connect with Us!</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=1" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Follow
        </a>
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=2" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Share
        </a>
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=3" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Like
        </a>
    </div>
</div>

相关组件

俏皮的娱乐按钮

一组专为娱乐或媒体平台设计的俏皮有趣的按钮,具有柔和/不饱和的颜色和圆润的元素。响应式,包括深色模式支持。

打开

拟物按钮组件

一个按钮组件,具有神经形设计风格,支持响应效果和暗主题,使用Tailwind CSS。

打开

交互式照片库按钮

一组专为照片库和摄影师作品集设计的响应式交互式按钮,具有森林/绿色调色板和微妙的微交互效果,可促进用户参与。包括深色模式支持。

打开