• 八种button的hover效果

     CSS八种hover效果，快用起来_哔哩哔哩_bilibili

    以下由于引入了transition所以还需要加兼容性处理：

    -ms-        ：/* IE 9 */

    -webkit-        ：/* Safari 和 Chrome */

    -moz-        ：/* Firefox */

    -o-        ：/* Opera */

    1.  
    2.   <!DOCTYPE html>
    3.   <html lang="en">
    4.   <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>
    10.       .btn1{
    11.         width: 100px;
    12.         height: 40px;
    13.         color: #fff;
    14.         font-size: 20px;
    15.         position: relative;
    16.         background-color: skyblue;
    17.         border: skyblue;
    18.         border-radius: 5px;
    19.         text-align: right;
    20.         padding-right: 20px;
    21.       }
    22.       .btn1:hover img{
    23.         animation: fly 2s ease 1;
    24.       }
    25.       @keyframes fly {
    26.         0%{
    27.           transform: translateX(0);
    28.         }
    29.         50%{
    30.           transform: translateX(100px);
    31.         }
    32.         100%{
    33.           transform: translateX(0);
    34.         }
    35.       }
    36.       .btn1 img{
    37.         width: 20px;
    38.         position: absolute;
    39.         top: 10px;
    40.         left: 10px;
    41.       }
    42.  
    43.       .btn2{
    44.         width: 100px;
    45.         height: 40px;
    46.         color: skyblue;
    47.         font-size: 20px;
    48.         background-color: transparent;
    49.         border-color: skyblue;
    50.         border-radius: 5px;
    51.       }
    52.       .btn2:hover{
    53.         background-color: skyblue;
    54.         color: #fff;
    55.         border: skyblue;
    56.         box-shadow: 0 0 99px 20px skyblue;
    57.       }
    58.  
    59.       .btn3{
    60.         font-size: 20px;
    61.         color:blue;
    62.         background: transparent;
    63.         border: 0;
    64.         text-transform: uppercase;
    65.         padding: 10px 20px;
    66.         box-sizing: border-box;
    67.         position: relative;
    68.       }
    69.       .btn3::before,.btn3::after{
    70.         content:"";
    71.         box-sizing:inherit;
    72.         border: 2px solid transparent;
    73.         width: 0%;
    74.         height: 0%;
    75.         position: absolute;
    76.       }
    77.       .btn3::before{
    78.         top: 0;
    79.         left: 0;
    80.       }
    81.       .btn3::after{
    82.         right: 0;
    83.         bottom: 0;
    84.       }
    85.       .btn3:hover::before{
    86.         border-top-color:blue;
    87.         border-right-color:blue;
    88.         transition: width 0.3s ease-out,height 0.3s ease-out 0.3s;
    89.         width: 100%;
    90.         height: 100%;
    91.       }
    92.       .btn3:hover::after{
    93.         border-bottom-color:blue;
    94.         border-left-color: blue;
    95.         transition: width 0.3s ease-out 0.6s,height 0.3s ease-out 0.9s;
    96.         width: 100%;
    97.         height: 100%;
    98.       }
    99.  
    100.       #btn4{
    101.         width: 150px;
    102.         height: 50px;
    103.         background-color: #0597eb;
    104.         color: #fff;
    105.         font-size: 24px;
    106.         text-align: center;
    107.         line-height: 50px;
    108.         border-radius: 25px;
    109.         overflow: hidden;
    110.         position: relative;
    111.       }
    112.       #btn4 .sp{
    113.         position: absolute;
    114.         z-index: 9;
    115.         color: red;
    116.       }
    117.       #btn4::before{
    118.         position: absolute;
    119.         top: 0;
    120.         left: 0;
    121.         content: "";
    122.         z-index: 0;
    123.         width: 0px;
    124.         height: 100%;
    125.         transition: all 2s ease;
    126.         -webkit-transition:all 2s ease;
    127.         background-color: #aa00aa;
    128.       }
    129.       #btn4:hover::before{
    130.         width: 200px;
    131.         height: 50px;
    132.       }
    133.       #arrow{
    134.         position: absolute;
    135.         background-color: #aa00aa;
    136.         width: 50px;
    137.         height: 50px;
    138.         border-radius: 25px;
    139.         float: left;
    140.         z-index: 9;
    141.       }
    142.       #arrow span{
    143.         float: left;
    144.         color: #fff;
    145.       }
    146.  
    147.       .btn-container{
    148.         position: relative;
    149.       }
    150.       .btn5{
    151.         border: 0;
    152.         border-radius: 50px;
    153.         color: #fff;
    154.         background-color: #5f55af;
    155.         padding: 15px 20px 15px 60px;
    156.         text-transform: uppercase;
    157.         background: linear-gradient(to right,#f72585 50%,#5f55af 50%);
    158.         background-size: 200% 100%;
    159.         background-position: right bottom; 
    160.         /* 如果加在 :hover后面，鼠标移出会没有效果 */
    161.         transition: all 2s ease;
    162.       }
    163.       .btn-container span{
    164.         background-color: #f72585;
    165.         height: 100%;
    166.         width: 46px;
    167.         position: absolute;
    168.         left: 0;
    169.         top: 0;
    170.         border-radius: 50%;
    171.         
    172.       }
    173.       button:hover{
    174.         background-position: left bottom;
    175.       }
    176.  
    177.       .btn6{
    178.         color: #fff;
    179.         border: 0;
    180.         background-color: #18a6b8;
    181.         width: 200px;
    182.         height: 50px;
    183.         font-size: 24px;
    184.         border-radius:10px;
    185.         transition: all 2s ease;
    186.       }
    187.       .btn6:hover{
    188.         border-top-left-radius: 50px;
    189.         border-bottom-right-radius: 50px;
    190.       }
    191.  
    192.       .btn7{
    193.         width: 200px;
    194.         height: 50px;
    195.         background: linear-gradient(to right ,#25aae1,#40e495);
    196.         border: 0;
    197.         font-size: 24px;
    198.         color: #fff;
    199.         position: relative;
    200.         border-radius: 50px;
    201.         overflow: hidden;
    202.       }
    203.       .btn7::before{
    204.         content: "";
    205.         width: 0px;
    206.         height: 100%;
    207.         position: absolute;
    208.         top: 0;
    209.         left: 0;
    210.         background-color: rgba(255,255,255,0.5);
    211.         transition:all 2s ease;
    212.       }
    213.       .btn7:hover::before{
    214.         width: 200px;
    215.       }
    216.       
    217.       .btn8{
    218.         padding: 0;
    219.         width: 200px;
    220.         height: 50px;;
    221.         border: 2px solid #fff;
    222.         font-size: 24px;
    223.         color: #fff;
    224.         background-color: #1B2543;
    225.         transition: all 1s ease;
    226.         position: relative;
    227.         box-sizing: content-box;
    228.         overflow: hidden;
    229.       }
    230.       .btn8::before{
    231.         content:'';
    232.         width: 20px;
    233.         height: 50px;
    234.         background-color: rgba(255, 255, 255, 0.1);
    235.         transform: skewX(45deg);
    236.         transform-origin:0%,0%;
    237.         position: absolute;
    238.         top: 0px;
    239.         left: -45px;
    240.       }
    241.       .btn8:hover::before{
    242.         left: 225px;
    243.         transition: all 0.5s linear;
    244.       }
    245.  
    246.       .btn9{
    247.         width: 200px;
    248.         height: 50px;
    249.         border: 0;
    250.         font-size: 24px;
    251.         color: #000;
    252.         font-weight: 600;
    253.         background:linear-gradient(to right ,#FF765D 50%,#fff 50%);
    254.         background-size: 200% 100%;
    255.         background-position: right bottom;
    256.         transition: all 1s ease;
    257.       }
    258.       .btn9:hover{
    259.         background-position: left bottom;
    260.       }
    261.  
    262.     </style>
    263.   </head>
    264.   <body>
    265.     <div id="d1">
    266.      <button class="btn1"><img src="flay.webp" alt="纸飞机"> 按钮1 </button>
    267.      <button class="btn2">按钮2</button>
    268.      <button class="btn3">Hover Me</button>
    269.      <div id="btn4"><div id="arrow"><span>-></span></div><span class="sp">Hover Me</span></div>
    270.      <div class="btn-container"><span>-></span><button class="btn5">Hover Me</button></div></button>
    271.      <button class="btn6">Hover Me</button>
    272.      <button class="btn7">Hover Me</button>
    273.      <button class="btn8">Hover Me</button>
    274.      <button class="btn9">Hover Me</button>
    275.  
    276.     </div>
    277.   </body>
    278.   </html>

  • 相关阅读:
    OSPF笔记
    kubernetes部署rocketmq集群
    轻量化Backbone | ShuffleNet+ViT结合让ViT也能有ShuffleNet轻量化的优秀能力
    数字零售力航母-看微软如何重塑媒体
    蓝桥杯成绩已出
    【附源码】计算机毕业设计JAVA技术的游戏交易平台
    程序员不撰写代码注释和文档的十大理由
    kubernetes集群安装实战
    .NET -- 使用Dump文件分析异常
    基于Transformer实现英语--＞西班牙语的翻译任务
  • 原文地址：https://blog.csdn.net/qq_36582776/article/details/125423888