20 個讓用戶驚嘆不已的按鈕效果

作者：佚名 2024-01-05 14:47:01

開發前端

為什么按鈕效果很重要？將按鈕效果集成到簡單的按鈕中可以為用戶提供直觀的反饋并引導他們完成界面。

這些效果提供的視覺提示（例如顏色或運動的變化）可以立即傳達按鈕的交互性，從而減少不確定性并提高用戶信心。

一致且精心設計的效果在建立品牌形象方面也發揮著作用，因為用戶可能會將特定的動畫或風格與特定的品牌聯系起來。此外，結合引人入勝的按鈕效果可以提高點擊率，使用戶更有可能與界面交互。

在今天這篇文章中，我們將使用流行的 CSS 框架 Tailwind CSS 探索 20 種不同的按鈕效果。這些效果不僅在視覺上令人驚嘆，而且功能強大，為用戶提供了令人愉悅且引人入勝的界面。

讓我們深入研究不同類型的按鈕效果。

1.漸變懸停效果

此按鈕效果利用漸變懸停效果在用戶與按鈕交互時添加動態且視覺上吸引人的過渡。過渡由過渡和緩出類控制，確保無縫且令人愉悅的效果。

<button class="group relative inline-flex items-center justify-center overflow-hidden rounded-md border-4 border-double border-black px-6 py-3 font-bold text-black shadow-2xl hover:border-transparent hover:text-white">
    <span class="absolute inset-0 h-full w-full bg-gradient-to-br from-pink-600 via-purple-700 to-blue-400 opacity-0 transition duration-300 ease-out group-hover:opacity-100"></span>
    <span class="relative">Button Text</span>
</button>

查看的現場演示：https://play.tailwindcss.com/1jWHgDajYF

2. 幻燈片和顏色過渡

該按鈕具有結合運動和顏色過渡的迷人效果。過渡效果使用transition-all 和duration-300 類進行編排，從而創建無縫且引人入勝的用戶交互。

<button class="group relative m-1 cursor-pointer overflow-hidden rounded-md border-2 border-pink-500 px-5 py-3 font-mono font-semibold">
    <span class="ease absolute top-1/2 h-0 w-64 origin-center -translate-x-20 rotate-45 bg-pink-500 transition-all duration-300 group-hover:h-64 group-hover:-translate-y-32"></span>
    <span class="ease relative text-pink-500 transition duration-300 group-hover:text-white">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/c63niP25r3

3. 懸停時按鈕填充

該按鈕引入了一種迷人的效果，懸停時，紫色背景優雅地填充按鈕的邊框。該效果是通過過渡全部、持續時間 300 和緩出類的組合來實現的，提供平滑且具有視覺吸引力的過渡。

<button class="group relative inline-block overflow-hidden rounded border-4 border-double border-purple-500 px-8 py-3 font-medium text-purple-600">
    <span class="absolute left-0 top-0 mb-0 flex h-full w-0 translate-x-0 transform bg-purple-600 opacity-90 transition-all duration-300 ease-out group-hover:w-full"></span>
    <span class="relative group-hover:text-white">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/asqHCy1E6b

4. 揭開陰影和文本過渡的面紗

當用戶將鼠標懸停在該按鈕上時，該按鈕會呈現出獨特的效果。旋轉的陰影投射元素逐漸顯現出來，創造出動態效果。

<button class="group relative inline-flex items-center justify-start overflow-hidden rounded-full px-5 py-3 font-bold">
    <span class="absolute left-0 top-0 h-32 w-32 -translate-y-2 translate-x-12 rotate-45 bg-black opacity-[3%]"></span>
    <span class="absolute left-0 top-0 -mt-1 h-48 w-48 -translate-x-56 -translate-y-24 rotate-45 bg-black opacity-100 transition-all duration-500 ease-in-out group-hover:-translate-x-8"></span>
    <span class="relative w-full text-left text-black transition-colors duration-200 ease-in-out group-hover:text-white">Button Text</span>
    <span class="absolute inset-0 rounded-full border-2 border-black"></span>
</button>

查看演示：https://play.tailwindcss.com/v1UqwSR5E3

5. 懸停時邊界反轉

該按鈕引入了一種時尚的效果，當鼠標懸停時，按鈕的邊框顏色會迅速反轉，形成鮮明的對比。

過渡效果由transition-all、duration-100 和ease-linear 類控制，從而產生視覺上吸引人且響應靈敏的按鈕交互。

<button class="group relative inline-flex items-center justify-start overflow-hidden rounded border-2 border-blue-600 bg-blue-600 px-5 py-3 font-medium transition-all hover:bg-white">
    <span class="absolute inset-0 rounded border-0 border-white transition-all duration-100 ease-linear group-hover:border-[25px]"></span>
    <span class="relative w-full text-left text-white transition-colors duration-200 ease-in-out group-hover:text-blue-600">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/0yFo0zLPqg

6. 懸停時滑動圖標

該按鈕的背景顏色會發生變化，并且文本會平滑地向右平移。過渡效果由transition-all、duration-300 和ease-out 類控制，從而產生視覺上動態且響應靈敏的按鈕交互。

<button class="group relative inline-flex items-center justify-center overflow-hidden border-2 border-purple-500 p-4 px-6 py-3 font-medium text-indigo-600 shadow-md transition duration-300 ease-out hover:border-4 hover:border-double">
    <span class="ease absolute inset-0 flex h-full w-full -translate-x-full items-center justify-center bg-purple-500 text-white duration-300 group-hover:translate-x-0">
      <svg class="h-6 w-6" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
    </span>
    <span class="ease absolute flex h-full w-full transform items-center justify-center text-purple-500 transition-all duration-300 group-hover:translate-x-full">Button Text</span>
    <span class="invisible relative">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/lRM1prgN3x

7. 懸停時漸變填充和文本顯示

該按鈕展示了一種復雜的效果，懸停時，漸變背景優雅地填充按鈕。顏色過渡和文本顯示效果是使用transition-all、duration-400 和ease-out 類精心編排的。

<button class="group relative inline-flex items-center justify-center overflow-hidden rounded-md p-0.5 font-bold">
    <span class="absolute h-full w-full bg-gradient-to-br from-[#ff8a05] via-[#ff5478] to-[#ff00c6] group-hover:from-[#ff00c6] group-hover:via-[#ff5478] group-hover:to-[#ff8a05]"></span>
    <span class="duration-400 relative rounded-md bg-white px-6 py-3 transition-all ease-out group-hover:bg-opacity-0">
      <span class="relative bg-gradient-to-br from-[#ff8a05] via-[#ff5478] to-[#ff00c6] bg-clip-text text-transparent group-hover:text-white">Button Text</span>
    </span>
</button>

查看演示：https://play.tailwindcss.com/0Ll4ClY0JA

8.懸停時展開漸變邊框

此按鈕轉換由transition-all、duration-200 和ease-out 類控制。展開邊框和文本顏色過渡的結合產生了引人入勝且精美的按鈕交互。

<button class="group relative m-1 inline-flex cursor-pointer items-center justify-center overflow-hidden rounded border-b-4 border-l-2 border-lime-700 bg-gradient-to-tr from-lime-700 to-lime-400 px-7 py-4 font-mono text-white shadow-lg hover:text-lime-800">
    <span class="absolute h-0 w-0 bg-lime-200 transition-all duration-200 ease-out group-hover:h-full group-hover:w-full"></span>
    <span class="relative">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/QzMYYsVnkL

9. 懸停時的雙重轉換

此按鈕在懸停時引入了迷人的雙轉換效果。轉換由transition-all 和duration 類控制，從而實現無縫且精美的按鈕交互。

<button class="group relative inline-flex items-center overflow-hidden rounded-full border-2 border-fuchsia-800 px-12 py-3 text-lg font-medium text-fuchsia-800 hover:bg-gray-50 hover:text-white">
    <span class="duration-400 ease absolute left-0 top-1/2 block h-0 w-full bg-fuchsia-800 opacity-100 transition-all group-hover:top-0 group-hover:h-full"></span>
    <span class="ease absolute right-0 flex h-10 w-10 translate-x-full transform items-center justify-start duration-500 group-hover:-translate-x-2">
      <svg class="h-5 w-5" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
    </span>
    <span class="relative transform duration-700 group-hover:-translate-x-3">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/IftYmD7SZt

10. 帶有邊框過渡的 3D 效果

此按鈕展示了具有復雜邊框過渡的復雜 3D 效果。過渡是通過過渡和緩出類實現的，從而產生視覺上有趣且精美的按鈕交互。

<button class="group relative px-6 py-3 text-black">
    <span class="absolute inset-0 h-full w-full -translate-x-2 -translate-y-2 transform bg-red-200 transition duration-300 ease-out group-hover:translate-x-0 group-hover:translate-y-0"></span>
    <span class="absolute z-[1] h-full w-full -translate-x-8 -translate-y-5 border-b-2 border-e-2 border-white group-hover:border-none"></span>
    <span class="absolute inset-0 h-full w-full translate-x-2 translate-y-2 transform border-s-2 border-t-2 border-white bg-red-200 transition duration-300 ease-out group-hover:translate-x-0 group-hover:translate-y-0"></span>
    <span class="absolute inset-0 z-[1] h-full w-full border-2 border-black"></span>
    <span class="relative">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/awQ1Ozwlio

11.帶有環形和陰影效果的漸變懸停

該按鈕在懸停時采用無縫漸變過渡，從純灰色背景平滑地轉換為從灰色到淺色的漸變。過渡效果是通過過渡所有和持續時間類來實現的，增強了整體的美感。

<button class="group relative overflow-hidden rounded bg-gray-600 px-8 py-4 text-white transition-all duration-300 ease-out hover:bg-gradient-to-r hover:from-gray-600 hover:to-gray-400 hover:ring-2 hover:ring-gray-600 hover:ring-offset-2">
    <span class="ease absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 transform bg-white opacity-10 transition-all duration-700 group-hover:-translate-x-40"></span>
    <span class="relative">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/94URl02gyK

12.懸停時點狀邊框切換

該按鈕的轉換由轉換和緩出類控制，從而實現平滑且精美的按鈕交互。懸停狀態下文字顏色也從黑色平滑過渡到白色，增強整體動態感。

<button class="group relative inline-block px-4 py-2 font-medium">
    <span class="absolute inset-0 h-full w-full translate-x-1 translate-y-1 transform border-2 border-dotted border-black bg-black transition duration-200 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:bg-white"></span>
    <span class="absolute inset-0 h-full w-full border-2 border-dotted border-black bg-white group-hover:bg-black"></span>
    <span class="relative text-black group-hover:text-white">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/VJBSikvFPp

13. 懸停時綻放多彩花朵

這個按鈕呈現出令人著迷的效果，就像盛開的花朵。過渡是使用過渡和持續時間類來編排的，確保流暢和愉快的體驗。

<button class="group relative inline-block items-center justify-center overflow-hidden rounded-lg px-8 py-5 font-medium text-indigo-600 shadow-2xl">
    <span class="ease absolute left-0 top-0 -ml-3 -mt-10 h-40 w-40 rounded-full bg-red-500 blur-md transition-all duration-700"></span>
    <span class="ease absolute inset-0 h-full w-full transition duration-700 group-hover:rotate-180">
      <span class="absolute bottom-0 left-0 h-24 w-24 rounded-full bg-purple-500 blur-md"></span>
      <span class="absolute bottom-0 right-0 h-24 w-24 rounded-full bg-blue-600 blur-md"></span>
      <span class="absolute bottom-0 right-0 h-24 w-24 rounded-full bg-sky-500 blur-md"></span>
      <span class="absolute bottom-0 right-0 h-24 w-24 rounded-full bg-green-500 blur-md"></span>
      <span class="absolute bottom-0 right-0 -mr-10 h-24 w-24 rounded-full bg-orange-500 blur-md"></span>
      <span class="absolute bottom-0 right-0 -mr-20 h-24 w-24 rounded-full bg-red-500 blur-md"></span>
    </span>
    <span class="relative text-white">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/pXEw9wgbk6

14. 懸停時滑動并展開

此按鈕具有復雜的效果，懸停時文本容器會平滑滑動以顯示漸變背景。使用過渡和持續時間類來編排過渡，確保無縫且精美的按鈕交互。

<button class="group relative inline-block font-mono text-lg">
    <span class="relative z-10 block overflow-hidden rounded-lg border border-blue-900 px-5 py-3 font-medium leading-tight text-blue-800 transition-colors duration-300 ease-out group-hover:border-transparent group-hover:text-white">
      <span class="absolute inset-0 h-full w-full rounded-lg bg-blue-50 px-5 py-3"></span>
      <span class="ease absolute left-0 -ml-2 h-48 w-48 origin-top-right -translate-x-full translate-y-12 -rotate-90 bg-gradient-to-br from-blue-500 to-blue-900 transition-all duration-300 group-hover:-rotate-180"></span>
      <span class="relative">Button Text</span>
    </span>
    <span class="absolute bottom-0 right-0 -mb-1 -mr-1 h-12 w-full rounded-lg bg-blue-900 transition-all duration-200 ease-linear group-hover:mb-0 group-hover:mr-0 group-hover:bg-transparent" data-rounded="rounded-lg"></span>
</button>

查看演示：https://play.tailwindcss.com/zfZ2dbZyrs

15. 懸停時的幻燈片和圖標轉換

此按鈕具有時尚的效果，懸停時，文本容器會平滑滑動以顯示背景顏色變化。使用過渡和持續時間類來編排過渡，確保無縫且精美的按鈕交互。

<button class="group relative inline-flex items-center justify-start overflow-hidden rounded bg-indigo-50 py-3 pl-6 pr-16 font-semibold text-indigo-600 transition-all duration-150 ease-in-out hover:pl-16 hover:pr-6">
    <span class="absolute bottom-0 left-0 h-1 w-full bg-indigo-600 transition-all duration-150 ease-in-out group-hover:h-full"></span>
    <span class="absolute right-0 pr-7 duration-200 ease-out group-hover:translate-x-12">
      <svg class="h-5 w-5 text-green-400" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
    </span>
    <span class="absolute left-0 -translate-x-12 pl-7 duration-200 ease-out group-hover:translate-x-0">
      <svg class="h-5 w-5 text-green-400" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
    </span>
    <span class="relative w-full text-left transition-colors duration-200 ease-in-out group-hover:text-white">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/P6CyJmaXSM

16.懸停時傾斜背景

該按鈕的傾斜效果由transition-all、duration-300 和ease-out 類控制，從而產生完美且無縫的按鈕交互。懸停狀態下文字顏色也會變成黃色，增強整體現代感和活力。

<button class="group relative px-7 py-2 font-medium text-white hover:text-yellow-900">
    <span class="absolute inset-0 h-full w-full translate-x-0 -skew-x-12 transform bg-yellow-400 transition-all duration-300 ease-out group-hover:skew-x-0 group-hover:bg-yellow-700"></span>
    <span class="absolute inset-0 h-full w-full skew-x-12 transform bg-yellow-700 transition-all duration-300 ease-out group-hover:-skew-x-0 group-hover:bg-yellow-400"></span>
    <span class="relative">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/5em7GUV6NG

17. 折疊角和懸停滑動

該按鈕呈現動態效果，懸停時右上角會平滑折疊，露出白色三角形元素。使用transition-all、duration 和ease-in-out 類來編排過渡，從而產生精美且具有視覺吸引力的按鈕交互。

<button class="group relative inline-flex items-center justify-start overflow-hidden rounded-xl bg-red-500 px-8 py-4 font-medium transition-all">
    <span class="absolute right-0 top-0 inline-block h-4 w-4 rounded bg-red-700 transition-all duration-500 ease-in-out group-hover:-mr-4 group-hover:-mt-4">
      <span class="absolute right-0 top-0 h-5 w-5 -translate-y-1/2 translate-x-1/2 rotate-45 bg-white"></span>
    </span>
    <span class="absolute bottom-0 left-0 h-full w-full -translate-x-full translate-y-full rounded-2xl bg-red-600 transition-all delay-200 duration-500 ease-in-out group-hover:mb-14 group-hover:translate-x-0"></span>
    <span class="relative w-full text-left text-white transition-colors duration-200 ease-in-out group-hover:text-white">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/tfNFvLpxHe

18.懸停時的雙背景混合

該按鈕具有迷人的效果，懸停時，雙背景無縫地融入視圖中。過渡由過渡和持續時間 300 類控制，確保平滑和精美的按鈕交互。

<button class="group relative rounded-lg px-6 py-3 font-bold text-white">
    <span class="ease absolute inset-0 h-full w-full -translate-x-1 -translate-y-1 transform bg-blue-800 transition duration-300 group-hover:translate-x-0 group-hover:translate-y-0"></span>
    <span class="ease absolute inset-0 h-full w-full translate-x-1 translate-y-1 transform bg-yellow-700 mix-blend-screen transition duration-300 group-hover:translate-x-0 group-hover:translate-y-0"></span>
    <span class="relative">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/thLDGOm8Ya

19. 對角滑動和漸變懸停

此按鈕引入了視覺動態效果，懸停時，對角漸變背景會從左下角優雅地滑入視圖。過渡由transition-all、duration 和ease-out 類控制，從而產生精美且引人入勝的按鈕交互。

<button class="group relative inline-flex items-center justify-start overflow-hidden rounded bg-white px-6 py-3 font-medium transition-all hover:bg-white">
    <span class="absolute bottom-0 left-0 mb-9 ml-9 h-48 w-48 -translate-x-full translate-y-full rotate-[-40deg] rounded bg-gradient-to-br from-[#ff8a05] via-[#ff5478] to-[#ff00c6] transition-all duration-500 ease-out group-hover:mb-32 group-hover:ml-0 group-hover:translate-x-0"></span>
    <span class="relative w-full text-left text-black transition-colors duration-300 ease-in-out group-hover:text-white">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/BHjNo4zUiJ

20. 懸停時的漸變顯示和圓圈擴展

此按鈕展示了一種優雅的效果，懸停時，漸變背景逐漸從頂部顯露出來，創建平滑的過渡效果。過渡由transition-all、duration-500 和ease-out 類控制，從而產生精美且引人入勝的按鈕交互。

<button class="group relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-blue-800 px-10 py-4 font-mono font-medium tracking-tighter text-white">
    <span class="absolute h-0 w-0 rounded-full bg-green-500 transition-all duration-500 ease-out group-hover:h-56 group-hover:w-56"></span>
    <span class="absolute inset-0 -mt-0 h-full w-full rounded-lg bg-gradient-to-b from-transparent to-gray-700"></span>
    <span class="relative">Button Text</span>
</button>

查看演示：https://play.tailwindcss.com/rJ51kypb8m

結論

以上就是我今天想與你分享的20個用CSS框架實現的動畫效果，這些效果在網頁設計的動態視覺中是非常有用的，按鈕效果的作用遠遠超出了單純的美觀。所展示的多樣性，從漸變填充和邊框反轉到滑動圖標和 3D 變換，強調了按鈕效果的多功能性。

責任編輯：華軒來源： web前端開發

按鈕效果開發