如何使用CSS建立按鈕懸停動畫效果？-css教學-PHP中文網

按鈕懸停動畫效果的屬性

使用CSS建立按鈕懸停動畫效果

範例1 - 懸停放大

Button hover animation effect using CSS

Scale Up on Hover effect

範例2：滑鼠懸停時淡入

Fade In Effect on Hover

範例3：滑鼠懸停時向上滑動

Slide Up Effect on Hover

結論

首頁

web前端

css教學

如何使用CSS建立按鈕懸停動畫效果？

PHPz

Sep 06, 2023 am 09:53 AM

如何使用CSS建立按鈕懸停動畫效果？

CSS中的懸停動畫效果是指當滑鼠指標停留在元素上時，元素外觀會改變。我們使用CSS在懸停時創建各種動畫效果，例如縮放、淡入淡出、滑動或旋轉元素。

按鈕懸停動畫效果的屬性

transform − 這個屬性允許您對元素進行縮放、旋轉或平移。
opacity − 這個屬性設定元素的透明度級別，其中1表示完全可見，0表示完全透明。
background-color − 這個屬性設定元素的背景顏色。
color − 這個屬性設定元素的文字顏色。
transition − 此屬性控制兩個狀態之間的動畫效果，例如預設狀態和懸停狀態。
bottom和top - 屬性將元素相對於其容器定位。

使用CSS建立按鈕懸停動畫效果

按鈕懸停動畫是為網站增加視覺吸引力的好方法。要使用CSS建立按鈕懸停動畫效果，我們通常會使用:hover偽類選擇器與CSS轉場或關鍵影格動畫結合。透過以下步驟，我們可以輕鬆地創建按鈕懸停動畫效果。

第一步 - 建立用於黏性球動畫的HTML程式碼
#第二步 - 新增CSS樣式到按鈕
第三步 - 新增懸停動畫效果

In this article we will explore three examples to create button hover animation effects in CSS.

範例1 - 懸停放大

在這個範例中，按鈕將具有藍色背景和白色文字。當滑鼠指標停留在按鈕上時，按鈕將使用transform屬性以平滑的過渡在0.5秒內縮放20%，背景顏色將變為綠色。

<!DOCTYPE html>
<html>
<head>
   <style>
      Body{
         text-align:center;
      }
      .scale-up-btn {
         background-color: blue;
         color: white;
         padding: 10px 30px;
         margin:20px;
         border: none;
         transition: transform 0.5s ease;
         transform: scale(1);
         border-radius:10px;
      }
      .scale-up-btn:hover {
         transform: scale(1.2);
         background-color: green;
      }
   </style>
</head>
   <body>
      <h2 id="Button-hover-animation-effect-using-CSS">Button hover animation effect using CSS</h2>
      <h3 id="Scale-Up-on-Hover-effect">Scale Up on Hover effect</h3>
      <button class="scale-up-btn">Hover Me</button>
   </body>
</html>

登入後複製

範例2：滑鼠懸停時淡入

在這個範例中，按鈕將具有藍色背景和白色文本，初始不透明度為0.5。當滑鼠指標停留在按鈕上時，不透明度將在0.5秒內平滑過渡到1。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .fade-in-btn {
         background-color: blue;
         color: white;
         padding: 10px 20px;
         margin:15px;
         border: none;
         opacity: 0.5;
         transition: opacity 0.5s ease;
      }
      .fade-in-btn:hover {
         opacity: 1;
      }
   </style>
</head>
   <body>
      <h2 id="Button-hover-animation-effect-using-CSS">Button hover animation effect using CSS</h2>
      <h3 id="Fade-In-Effect-on-Hover">Fade In Effect on Hover</h3>
      <button class="fade-in-btn">Hover Me</button>
   </body>
</html>

登入後複製

範例3：滑鼠懸停時向上滑動

#在這個例子中，按鈕將具有藍色背景和白色文本，位置設定為相對。底部屬性設定為0，表示按鈕位於其容器的底部。當滑鼠指標停留在按鈕上時，底部屬性將增加到20px，導致按鈕在0.5秒內以平滑的過渡向上滑動。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .slide-up-btn {
         background-color: blue;
         color: white;
         padding: 15px 30px;
         border: none;
         position: relative;
         bottom: 0;
         transition: bottom 0.5s ease;
         border-radius:10px;
      }
      .slide-up-btn:hover {
         bottom: 20px;
      }
   </style>
</head>
   <body>
      <h3 id="Slide-Up-Effect-on-Hover">Slide Up Effect on Hover</h3>
      <button class="slide-up-btn">Hover Me</button>
   </body>
</html>

登入後複製