Пример градиентной кнопки Tailwind CSS

В этом разделе мы создадим градиентную кнопку tailwind, эффект градиентной кнопки tailwind, градиентную кнопку с несколькими цветами, пример контурной градиентной кнопки tailwind с помощью Tailwind CSS 3.

посмотреть

Пример 1

Простая градиентная кнопка Tailwind CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Gradient Button Example </title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="flex items-center justify-center h-screen">
      <div class="flex space-x-6">
        <button class="px-6 py-2 text-gray-100 rounded bg-gradient-to-r from-gray-600 to-gray-400">Button</button>
        <button class="px-6 py-2 text-blue-100 rounded bg-gradient-to-r from-blue-600 to-blue-400">Button</button>
        <button class="px-6 py-2 text-green-100 rounded bg-gradient-to-r from-green-600 to-green-400">Button</button>
        <button class="px-6 py-2 text-red-100 rounded bg-gradient-to-r from-red-600 to-red-400">Button</button>
        <button class="px-6 py-2 text-purple-100 rounded bg-gradient-to-r from-purple-600 to-purple-400">Button</button>
      </div>
    </div>
  </body>

</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Пример 2

Градиентная кнопка Tailwind CSS с эффектом наведения.

<button
    class="px-6 py-2 text-gray-100 rounded bg-gradient-to-r from-gray-600 to-gray-400 hover:from-gray-600 hover:to-gray-800">Button</button>
<button
    class="px-6 py-2 text-blue-100 rounded bg-gradient-to-r from-blue-600 to-blue-400 hover:from-blue-600 hover:to-blue-800">Button</button>
<button
    class="px-6 py-2 text-green-100 rounded bg-gradient-to-r from-green-600 to-green-400 hover:from-green-600 hover:to-green-800">Button</button>
<button
    class="px-6 py-2 text-red-100 rounded bg-gradient-to-r from-red-600 to-red-400 hover:from-red-600 hover:to-red-800">Button</button>
<button
    class="px-6 py-2 text-purple-100 rounded bg-gradient-to-r from-purple-600 to-purple-400 hover:from-red-600 hover:to-red-800">Button</button>
Вход в полноэкранный режим Выход из полноэкранного режима

Пример 3

Градиентная кнопка Tailwind CSS с несколькими цветами градиента.

<button
    class="px-6 py-2 text-gray-100 rounded bg-gradient-to-r from-green-300 via-blue-500 to-purple-600">Button</button>
<button
    class="px-6 py-2 text-blue-700 rounded bg-gradient-to-r from-indigo-200 via-red-200 to-yellow-100">Button</button>
<button
    class="px-6 py-2 text-green-100 rounded bg-gradient-to-r from-red-800 via-yellow-600 to-yellow-500">Button</button>
<button
    class="px-6 py-2 text-red-100 rounded bg-gradient-to-r from-slate-900 via-purple-900 to-slate-900">Button</button>
Вход в полноэкранный режим Выход из полноэкранного режима

Пример 4

Контурная градиентная кнопка Tailwind CSS.

<div class="p-0.5 rounded bg-gradient-to-r from-blue-500 via-red-500 to-yellow-500">
    <button class="px-6 py-2 text-blue-800 bg-white">Button</button>
</div>
<div class="p-1 rounded bg-gradient-to-r from-green-500 to-purple-500">
    <button class="px-6 py-2 text-blue-800 bg-white">Button</button>
</div>
<div class="p-1 rounded bg-gradient-to-r from-rose-500 to-purple-500">
    <button class="px-6 py-2 text-blue-800 bg-white">Button</button>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий