如何使用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>

登录后复制