如何用 CSS 创建淡入淡出按钮？

要在网页上创建淡入淡出按钮，请使用不透明度属性。要通过悬停鼠标光标启用此功能，请使用 :hover 选择器。在悬停时淡入时，如果实际按钮的不透明度设置为小于 1，则在悬停时将不透明度设置为 1。对于悬停时淡出，效果相反。

悬停时淡出

将不透明度设置为小于 1 以实现淡出概念。要在悬停时实现此功能，请使用 :hover 选择器 −

button:hover {
   opacity: 0.5;
}

示例

以下是在悬停时淡出的 CSS 淡入淡出按钮的代码 −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      button {
         background-color: rgb(255, 175, 222);
         border: none;
         color: black;
         padding: 25px;
         text-align: center;
         font-size: 20px;
         margin: 4px 2px;
         transition: 0.3s;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         font-weight: bolder;
         opacity: 1;
      }
      button:hover {
         opacity: 0.5;
      }
   </style>
</head>
<body>
   <h1>Fading Button Example</h1>
   <button>Hover Here</button>
   <p>Hover on the above button to see background fade on button</p>
</body>
</html>

悬停时淡入

将不透明度设置为 1 以实现淡入概念。要在悬停时实现此功能，请使用 :hover 选择器 −

button:hover {
   opacity: 1;
}

示例

以下是在悬停时淡入的 CSS 淡入淡出按钮的代码 −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      button {
         background-color: rgb(255, 175, 222);
         border: none;
         color: black;
         padding: 25px;
         text-align: center;
         font-size: 20px;
         margin: 4px 2px;
         transition: 0.3s;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         font-weight: bolder;
         opacity: 0.5;
      }
      button:hover {
         opacity: 1;
      }
   </style>
</head>
<body>
   <h1>Fading Button Example</h1>
   <button>Hover Here</button>
   <p>Hover on the above button to see background fade on button</p>
</body>
</html>

更新日期：2023 年 12 月 14 日

298 次浏览

开启你的 事业

完成课程后获得认证

开始
广告