如何在 Button 上创建悬停动画？

在这个项目中，我们将使用 HTML 和 CSS 创建动画按钮。在这些按钮上，当我们将鼠标悬停在它们上面时，它们会显示一个表情符号，以获得更好的用户体验。

按键一览：

CDN 链接：对于按钮图标，我们将使用 fontawesome CDN 链接。将此链接放在脚本标记中。

https://kit.fontawesome.com/704ff50790.js

HTML：创建一个 HTML 文件，然后创建将成为悬停效果的所有按钮的结构（切换到图标）。在该容器内创建一个 div 容器，放置所有按钮。

HTML

  
    
    
  
  
    
      
        Animated Buttons on Hover
        
            Confirm Delivery
        
        Download
        Upload
        Delete
        
            Message
        
      
    
    
    
  

CSS：它用于为我们的 HTML 页面提供不同类型的动画和效果，使其看起来对所有用户都是交互的。

• 恢复所有浏览器效果。
• 使用类和 id 为 HTML 元素赋予效果。
• 使用@keyframes{}为 HTML 元素提供动画。
• 使用 CSS 的 nth-child 选择器功能来调用不同的链接。

CSS

完整的解决方案：在本节中，我们将把上述部分放在一起，并创建有吸引力的悬停动画按钮。

HTML

  
    
    
    
      body {
        background-color: black;
      }
      body .container {
        width: 850px;
        margin: 70px auto 0px auto;
        text-align: center;
      }
      body .container .button-effect {
        padding: 30px 0px;
      }
      body .container .button-effect h2 {
        font-family: "Droid Serif", serif;
        font-size: 20px;
        color: #fff;
        margin-bottom: 40px;
      }
      body .container .button-effect a {
        margin-right: 17px;
      }
      body .container .button-effect a:nth-child(2) {
        background-color: #520a8d;
      }
      body .container .button-effect a:nth-child(3) {
        background-color: #4d0325;
      }
      body .container .button-effect a:nth-child(4) {
        background-color: #09858a;
      }
      body .container .button-effect a:nth-child(5) {
        background-color: #e60d2a;
      }
      body .container .button-effect a:nth-child(6) {
        background-color: #c45f0d;
      }
      body .container .button-effect a:last-child {
        margin-right: 0px;
      }
  
      .effect {
        text-align: center;
        display: inline-block;
        position: relative;
        text-decoration: none;
        color: #fff;
        text-transform: capitalize;
        /* background-color: - add your own background-color */
        font-family: "Roboto", sans-serif;
        /* put your font-family */
        font-size: 18px;
        padding: 20px 0px;
        width: 150px;
        border-radius: 6px;
        overflow: hidden;
      }
  
      /* effect-4 styles */
      .effect.effect-4 {
        transition: all 0.2s linear 0s;
      }
      .effect.effect-4:before {
        content: "\f0d1";
        font-family: FontAwesome;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 30px;
        transform: scale(0, 1);
        transition: all 0.2s linear 0s;
      }
      .effect.effect-4:hover {
        text-indent: -9999px;
      }
      .effect.effect-4:hover:before {
        transform: scale(1, 1);
        text-indent: 0;
      }
  
      .effect.effect-3 {
        transition: all 0.2s linear 0s;
      }
      .effect.effect-3:before {
        content: "\f019";
        font-family: FontAwesome;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 30px;
        transform: scale(0, 1);
        transition: all 0.2s linear 0s;
      }
      .effect.effect-3:hover {
        text-indent: -9999px;
      }
      .effect.effect-3:hover:before {
        transform: scale(1, 1);
        text-indent: 0;
      }
  
      .effect.effect-2 {
        transition: all 0.2s linear 0s;
      }
      .effect.effect-2:before {
        content: "\f093";
        font-family: FontAwesome;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 30px;
        transform: scale(0, 1);
        transition: all 0.2s linear 0s;
      }
      .effect.effect-2:hover {
        text-indent: -9999px;
      }
      .effect.effect-2:hover:before {
        transform: scale(1, 1);
        text-indent: 0;
      }
  
      .effect.effect-1 {
        transition: all 0.2s linear 0s;
      }
      .effect.effect-1:before {
        content: "\f2ed";
        font-family: FontAwesome;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 30px;
        transform: scale(0, 1);
        transition: all 0.2s linear 0s;
      }
      .effect.effect-1:hover {
        text-indent: -9999px;
      }
      .effect.effect-1:hover:before {
        transform: scale(1, 1);
        text-indent: 0;
      }
  
      .effect.effect-5 {
        transition: all 0.2s linear 0s;
      }
      .effect.effect-5:before {
        content: "\f1d8";
        font-family: FontAwesome;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 30px;
        transform: scale(0, 1);
        transition: all 0.2s linear 0s;
      }
      .effect.effect-5:hover {
        text-indent: -9999px;
      }
      .effect.effect-5:hover:before {
        transform: scale(1, 1);
        text-indent: 0;
      }
    
  
  
    
      
        Animated Buttons on Hover
        
            Confirm Delivery
        
        Download
        Upload
        Delete
        
            Message
        
      
    
    
  

输出：