iT邦幫忙

2022 iThome 鐵人賽
DAY 25
1
自我挑戰組

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列 第 25 篇

Day 25：建立炫砲按鈕【Tailwind – 實作元件(二)】

14th鐵人賽 blur button duration tailwindcss
722 瀏覽

  • 分享至 

  • xImage
    •  

今天要實作的按鈕為～
https://ithelp.ithome.com.tw/upload/images/20221010/201522514Gk8fSsAcz.png
剛好看到有這麼炫砲的按鈕可以學習，就分享上來給大家～/images/emoticon/emoticon34.gif

首先，就影片作者而言，今天示範的方法只是其中一種，使用 blur 的方式達成此種按鈕的效果，所以並不是唯一方法哦！

實作

建立基本架構

<body class="min-h-screen px-8 py-16 bg-gray-700">
    <div class="grid gap-8 items-start justify-center">
        <button type="button" class="px-7 py-4 bg-black rounded-lg leading-none flex items-center divide-x divide-gray-600">
        <span class="text-gray-100">Labs Release 2021.09</span>
        <span class="text-indigo-400">See what's new →</span>
        </button>
    </div>
</body>
  • 這裡影片作者有特別使用到 "& rarr;" 作為 icon
  • 影片作者有提到因為需要使用 divide 必須置中的關係，所以不以 space-x 作為文字間距
    https://ithelp.ithome.com.tw/upload/images/20221010/20152251HAxq9vlol9.png

加上燒瓶 icon (SVG)且修改其顏色，再加上 rotate

<body class="min-h-screen px-8 py-16 bg-gray-700">
    <div class="grid items-start justify-center gap-8">
      <button
        type="button"
        class="flex items-center py-4 leading-none bg-black divide-x divide-gray-600 rounded-lg px-7"
      >
        <span class="flex items-center space-x-5">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-6 h-6 text-pink-600 -rotate-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
            />
          </svg>
          <span class="pr-6 text-gray-100">Labs Release 2021.09</span>
        </span>
        <span class="pl-6 text-indigo-400">See what's new →</span>
      </button>
    </div>
  </body>

https://ithelp.ithome.com.tw/upload/images/20221010/20152251KYHklSyXbp.png

再來就是本篇的重頭戲了，我們需要創造出一區塊套用 blur，藉此做出 box-shadow 的效果

<body class="min-h-screen px-8 py-16 bg-gray-700">
    <div class="grid items-start justify-center gap-8">
      <div class="relative">
        <div class="absolute inset-0 bg-pink-600 rounded-lg"></div>
        <button
          type="button"
          class="flex items-center py-4 leading-none bg-black divide-x divide-gray-600 rounded-lg px-7"
        >
          <span class="flex items-center space-x-5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6 text-pink-600 -rotate-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
              />
            </svg>
            <span class="pr-6 text-gray-100">Labs Release 2021.09</span>
          </span>
          <span class="pl-6 text-indigo-400">See what's new →</span>
        </button>
      </div>
    </div>
  </body>
  • 為了將區塊以 absolute 搭配 inset-0 做區域填滿，所以必須在外層容器加上 relative
    https://ithelp.ithome.com.tw/upload/images/20221010/20152251082Oe6IbZc.png

避免 blur 區塊遮擋我們的按鈕，所以必須在按鈕加上 relative 讓他脫離 static

<body class="min-h-screen px-8 py-16 bg-gray-700">
    <div class="grid items-start justify-center gap-8">
      <div class="relative">
        <div class="absolute inset-0 bg-pink-600 rounded-lg"></div>
        <button
          type="button"
          class="relative flex items-center py-4 leading-none bg-black divide-x divide-gray-600 rounded-lg px-7"
        >
          <span class="flex items-center space-x-5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6 text-pink-600 -rotate-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
              />
            </svg>
            <span class="pr-6 text-gray-100">Labs Release 2021.09</span>
          </span>
          <span class="pl-6 text-indigo-400">See what's new →</span>
        </button>
      </div>
    </div>
  </body>

https://ithelp.ithome.com.tw/upload/images/20221010/20152251NiJsiNff1h.png

將 body 的背景色改為黑色，且把 blur 區塊加上 blur 樣式

<body class="min-h-screen px-8 py-16 bg-black">
    <div class="grid items-start justify-center gap-8">
      <div class="relative">
        <div class="absolute inset-0 bg-pink-600 rounded-lg blur"></div>
        <button
          type="button"
          class="relative flex items-center py-4 leading-none bg-black divide-x divide-gray-600 rounded-lg px-7"
        >
          <span class="flex items-center space-x-5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6 text-pink-600 -rotate-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
              />
            </svg>
            <span class="pr-6 text-gray-100">Labs Release 2021.09</span>
          </span>
          <span class="pl-6 text-indigo-400">See what's new →</span>
        </button>
      </div>
    </div>
  </body>

https://ithelp.ithome.com.tw/upload/images/20221010/20152251ArM8rdz0ek.png
樣子已經有點出來囉 ~/images/emoticon/emoticon42.gif

將 blur 區塊 inset-0 改為 -inset-0.5 以及加上 opacity-75

<body class="min-h-screen px-8 py-16 bg-black">
    <div class="grid items-start justify-center gap-8">
      <div class="relative">
        <div
          class="absolute -inset-0.5 bg-pink-600 rounded-lg blur opacity-75"
        ></div>
        <button
          type="button"
          class="relative flex items-center py-4 leading-none bg-black divide-x divide-gray-600 rounded-lg px-7"
        >
          <span class="flex items-center space-x-5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6 text-pink-600 -rotate-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
              />
            </svg>
            <span class="pr-6 text-gray-100">Labs Release 2021.09</span>
          </span>
          <span class="pl-6 text-indigo-400">See what's new →</span>
        </button>
      </div>
    </div>
  </body>
  • inset 與 blur 的數值大家可以去調整玩玩看會出現何種效果～

將 blur 區塊加上 gradient 效果

<body class="min-h-screen px-8 py-16 bg-black">
    <div class="grid items-start justify-center gap-8">
      <div class="relative">
        <div
          class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg blur opacity-75"
        ></div>
        <button
          type="button"
          class="relative flex items-center py-4 leading-none bg-black divide-x divide-gray-600 rounded-lg px-7"
        >
          <span class="flex items-center space-x-5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6 text-pink-600 -rotate-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
              />
            </svg>
            <span class="pr-6 text-gray-100">Labs Release 2021.09</span>
          </span>
          <span class="pl-6 text-indigo-400">See what's new →</span>
        </button>
      </div>
    </div>
  </body>

https://ithelp.ithome.com.tw/upload/images/20221010/201522514DPVm9I4vs.png

使用 group-hover，在 relative 這個外層容器加上 group，以及其他想要加上 group-hover 的元素

<body class="min-h-screen px-8 py-16 bg-black">
    <div class="grid items-start justify-center gap-8">
      <div class="relative group">
        <div
          class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-200"
        ></div>
        <button
          type="button"
          class="relative flex items-center py-4 leading-none bg-black divide-x divide-gray-600 rounded-lg px-7"
        >
          <span class="flex items-center space-x-5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6 text-pink-600 -rotate-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
              />
            </svg>
            <span class="pr-6 text-gray-100">Labs Release 2021.09</span>
          </span>
          <span
            class="pl-6 text-indigo-400 transition duration-200 group-hover:text-gray-100"
            >See what's new →</span
          >
        </button>
      </div>
    </div>
  </body>

圖片

將 blur 區塊的 transition 效果延長，duration-200 => duration-1000

        <div
          class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000"
        ></div>

圖片

  • 可以發現 blur 的 opacity 與內容文字的 text-gray-100 兩者動畫效果因 blur 延長為 1000ms 而不同步
    解決方法：

blur 區塊加上 group-hover:duration-200

        <div
          class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"
        ></div>
  • 這樣在 group-hover 的效果時瞬間是 duration-200 的時長觸發，而滑鼠移開之後套用的是原本的 duration-1000
    圖片
    其實到此我們要的效果就已經差不多了，剩下的就是細節調整，這邊細節上還需增加 animation

animation 新增客製化

      animation: {
        tilt: "tilt 10s infinite linear",
      },
      keyframes: {
        tilt: {
          "0%, 50%, 100%": {
            transform: "rotate(0deg)",
          },
          "25%": {
            transform: "rotate(5deg)",
          },
          "75%": {
            transform: "rotate(-5deg)",
          },
        },
      },
  • 都是新增在 extend 底下
  • 這邊 tilt 的角度是以較誇張的方式呈現，大家可以自己調整 25% 以及 75% 的角度～
    圖片

最終 tilt 以 1 度展示
圖片

終於完成炫砲按鈕了～大家可以自己做練習哦！！/images/emoticon/emoticon07.gif

參考影片 - Glowing Background Gradient Effects with Tailwind CSS


上一篇
Day 24：建立導覽列【Tailwind – 實作元件(一)】
下一篇
Day 26：建立登入格式【Tailwind – 實作元件(三)】
系列文
【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南 共 30 篇
  1. 26
    Day 26：建立登入格式【Tailwind – 實作元件(三)】
  2. 27
    Day 27：建立表單【Tailwind – 實作元件(四)】
  3. 28
    Day 28：建立卡片【Tailwind – 實作元件(五)】
  4. 29
    Day 29：checkbox、radio 小妙用【Tailwind – accent-color】
  5. 30
    Day 30：最佳化以及小技能【Tailwind – minify & Just-In-Time mode】
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙