devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端按钮特效合集【错过就后悔系列】_前端按钮点击效果

作者：Cpp五条 | 2024-02-16 11:26:07

赞

踩

前端按钮点击效果

都2023年，前端页面的按钮你还只是会简单的加个颜色，改个边框吗？这可不太符合我们的精彩世界，这里博主给大家分享一些精美的按钮特效，无毒，直接就可以食用，分享不易，记得三连噢；

目录

1、360度旋转按钮

​编辑

2、旋转按钮

3、 jQuery 实现萤火虫效果

4、 冰冻按钮

 5、加载按钮

 6、圆形加载按钮

7、按钮点击波纹效果

 8、流光按钮

 9、边框按钮

 10、闪亮按钮

 11、霓虹按钮

1、360度旋转按钮

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .banner {
  10.       width: 234px;
  11.       height: 34px;
  12.       border-radius: 34px;
  13.       position: absolute;
  14.       top: 400px;
  15.       left: 200px;
  16.     }
  17.  
  18.     .banner a {
  19.       display: inline-block;
  20.       width: 30px;
  21.       height: 30px;
  22.       line-height: 30px;
  23.       border-radius: 50%;
  24.       border: 2px solid #a18cd1;
  25.       position: absolute;
  26.       left: 0px;
  27.       top: 0px;
  28.       background: #fbc2eb;
  29.       color: #fff;
  30.       text-align: center;
  31.       text-decoration: none;
  32.       cursor: pointer;
  33.       z-index: 2;
  34.     }
  35.  
  36.     .banner a:hover+span {
  37.       transform: rotate(360deg);
  38.       opacity: 1;
  39.     }
  40.  
  41.     .banner span {
  42.       display: inline-block;
  43.       width: auto;
  44.       padding: 0 20px;
  45.       height: 34px;
  46.       line-height: 34px;
  47.       background: #a18cd1;
  48.       border-radius: 34px;
  49.       text-align: center;
  50.       position: absolute;
  51.       color: #fff;
  52.       text-indent: 25px;
  53.       opacity: 0;
  54.       transform-origin: 8% center;
  55.       transition: all 1s;
  56.     }
  57.   </style>
  58. </head>
  59.  
  60. <body>
  61.   <div class="banner">
  62.     <a href="#">wo</a>
  63.     <span>这是我的世界</span>
  64.   </div>
  65. </body>
  66.  
  67. </html>

2、旋转按钮

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .wrapper {
  10.             width: 100px;
  11.             height: 100px;
  12.             background: lightblue;
  13.             border-radius: 50%;
  14.             border: 2px solid lightgreen;
  15.             position: absolute;
  16.             top: 200px;
  17.             left: 400px;
  18.             cursor: pointer;
  19.         }
  20.  
  21.         .wrapper:after {
  22.             content: '你猜';
  23.             display: inline-block;
  24.             width: 100px;
  25.             height: 100px;
  26.             line-height: 100px;
  27.             border-radius: 50%;
  28.             text-align: center;
  29.             color: #fff;
  30.             font-size: 24px;
  31.         }
  32.  
  33.         .wrapper:hover .round {
  34.             transform: scale(1);
  35.             opacity: 1;
  36.             animation: rotating 6s 1.2s linear infinite alternate;
  37.         }
  38.  
  39.         @keyframes rotating {
  40.             0% {
  41.                 -webkit-transform: rotate(0deg);
  42.             }
  43.  
  44.             100% {
  45.                 -webkit-transform: rotate(180deg);
  46.             }
  47.         }
  48.  
  49.         .round {
  50.             width: 240px;
  51.             height: 240px;
  52.             border: 2px solid lightgreen;
  53.             border-radius: 50%;
  54.             position: absolute;
  55.             top: -70px;
  56.             left: -70px;
  57.             transition: all 1s;
  58.             transform: scale(0.35);
  59.             opacity: 0;
  60.         }
  61.  
  62.         .round span {
  63.             width: 40px;
  64.             height: 40px;
  65.             line-height: 40px;
  66.             display: inline-block;
  67.             border-radius: 50%;
  68.             background: lightblue;
  69.             border: 2px solid lightgreen;
  70.             color: #fff;
  71.             text-align: center;
  72.             position: absolute;
  73.         }
  74.  
  75.         .round span:nth-child(1) {
  76.             right: -22px;
  77.             top: 50%;
  78.             margin-top: -22px;
  79.         }
  80.  
  81.         .round span:nth-child(2) {
  82.             left: -22px;
  83.             top: 50%;
  84.             margin-top: -22px;
  85.         }
  86.  
  87.         .round span:nth-child(3) {
  88.             left: 50%;
  89.             bottom: -22px;
  90.             margin-left: -22px;
  91.         }
  92.  
  93.         .round span:nth-child(4) {
  94.             left: 50%;
  95.             top: -22px;
  96.             margin-left: -22px;
  97.         }
  98.     </style>
  99. </head>
  100.  
  101. <body>
  102.     <div class="wrapper">
  103.         <div class="round">
  104.             <span>东邪</span>
  105.             <span>西毒</span>
  106.             <span>南乞</span>
  107.             <span>北丐</span>
  108.         </div>
  109.     </div>
  110.  
  111. </body>
  112.  
  113. </html>

3、 jQuery 实现萤火虫效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  8.     <title>萤火虫动态按钮</title>
  9. </head>
  10. <style>
  11.     @font-face {
  12.         font-family: 'firefly';
  13.         src: url(ZCOOLKuaiLe-Regular.ttf);
  14.     }
  15.     * {
  16.         padding: 0;
  17.         margin: 0;
  18.     }
  19.     body {
  20.         height: 100vh;
  21.         background: url(yh.bmp) no-repeat;
  22.         background-size: cover;
  23.     }
  24.     ul {
  25.         list-style: none;
  26.     }
  27.     button {
  28.         outline: none;
  29.         border: none;
  30.     }
  31.     .firefly {
  32.         width: 180px;
  33.         height: 60px;
  34.         position: absolute;
  35.         top: 50%;
  36.         left: 50%;
  37.         transform: translate(-50%, -50%);
  38.         background: linear-gradient(to right, #6EB46E 10%, #55B455);
  39.         border-radius: 40px;
  40.         opacity: .88;
  41.         cursor: pointer;
  42.         transition: 1s;
  43.     }
  44.     .firefly:hover {
  45.         box-shadow: 0 0 10px #B4FFB4;
  46.     }
  47.     .firefly p {
  48.         line-height: 60px;
  49.         font-size: 22px;
  50.         color: #F5DD8F;
  51.         font-family: firefly;
  52.         opacity: .88;
  53.     }
  54.     .lightning {
  55.         width: 95%;
  56.         height: 80%;
  57.         position: absolute;
  58.         top: 50%;
  59.         left: 50%;
  60.         transform: translate(-50%, -50%);
  61.         border-radius: 40px;
  62.         transition: .8s;
  63.         overflow: hidden;
  64.     }
  65.     .firefly:hover .lightning {
  66.         box-shadow: 0 0 4px #B4FFB4 inset;
  67.     }
  68.     .lightning ul {
  69.         opacity: 0;
  70.         transition: .8s;
  71.     }
  72.     .firefly:hover ul {
  73.         opacity: .8;
  74.     }
  75.     .lightning ul li {
  76.         width: 5px;
  77.         height: 5px;
  78.         background-color: #91FA91;
  79.         position: absolute;
  80.         bottom: 10%;
  81.         border-radius: 50%;
  82.         opacity: .6;
  83.         animation: fireflymove infinite linear;
  84.     }
  85.     @keyframes fireflymove {
  86.         100% {
  87.             bottom: 100%;
  88.         }
  89.     }
  90. </style>
  91. <body>
  92.     <button class="firefly">
  93.         <p>萤火虫</p>
  94.         <div class="lightning">
  95.             <ul>
  96.                 <li></li>
  97.                 <li></li>
  98.                 <li></li>
  99.                 <li></li>
  100.                 <li></li>
  101.                 <li></li>
  102.                 <li></li>
  103.                 <li></li>
  104.             </ul>
  105.         </div>
  106.     </button>
  107. </body>
  108. <script>
  109.     var lgh = $('.lightning li').length;
  110.     console.log(lgh)
  111.  
  112.     $('.lightning li').each(function(i) {
  113.         $(this).css({
  114.             left: i * (100/lgh) + '%',
  115.             bottom: randomNum(-20, 10) + '%',
  116.             animationDuration: randomNum(1, 5) + 's'
  117.         });
  118.     });
  119.  
  120.     function randomNum(max, min) {
  121.         var num = Math.floor(Math.random() * (max-min+1) + min);
  122.         return num;
  123.     }
  124.  
  125. </script>
  126. </html>

 

4、 冰冻按钮

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     #frozen-btn {
  10.       display: flex;
  11.       align-items: center;
  12.       justify-content: center;
  13.       height: 100vh;
  14.     }
  15.  
  16.     button {
  17.       border: 0;
  18.       margin: 20px;
  19.       text-transform: uppercase;
  20.       font-size: 20px;
  21.       font-weight: bold;
  22.       padding: 15px 50px;
  23.       border-radius: 50px;
  24.       color: white;
  25.       outline: none;
  26.       position: relative;
  27.     }
  28.  
  29.     button:before {
  30.       content: '';
  31.       display: block;
  32.       background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
  33.       background-size: 210% 100%;
  34.       background-position: right bottom;
  35.       height: 100%;
  36.       width: 100%;
  37.       position: absolute;
  38.       top: 0;
  39.       bottom: 0;
  40.       right: 0;
  41.       left: 0;
  42.       border-radius: 50px;
  43.       transition: all 1s;
  44.       -webkit-transition: all 1s;
  45.     }
  46.  
  47.     .green {
  48.       background-image: linear-gradient(to right, #25aae1, #40e495);
  49.       box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
  50.     }
  51.  
  52.     .purple {
  53.       background-image: linear-gradient(to right, #6253e1, #852D91);
  54.       box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
  55.     }
  56.  
  57.     .purple:hover:before {
  58.       background-position: left bottom;
  59.     }
  60.  
  61.     .green:hover:before {
  62.       background-position: left bottom;
  63.     }
  64.   </style>
  65. </head>
  66.  
  67. <body>
  68.   <div id="frozen-btn">
  69.     <button class="green">Hover me</button>
  70.     <button class="purple">Hover me</button>
  71.   </div>
  72.  
  73. </body>
  74.  
  75. </html>

 5、加载按钮

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     #loading-btn {
  10.       display: flex;
  11.       align-items: center;
  12.       justify-content: center;
  13.       height: 100vh;
  14.     }
  15.  
  16.     button {
  17.       background: transparent;
  18.       border: 0;
  19.       border-radius: 0;
  20.       text-transform: uppercase;
  21.       font-weight: bold;
  22.       font-size: 20px;
  23.       padding: 15px 50px;
  24.       position: relative;
  25.     }
  26.  
  27.     button:before {
  28.       transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
  29.       content: '';
  30.       width: 1%;
  31.       height: 100%;
  32.       background: #ff5964;
  33.       position: absolute;
  34.       top: 0;
  35.       left: 0;
  36.     }
  37.  
  38.     button span {
  39.       mix-blend-mode: darken;
  40.     }
  41.  
  42.     button:hover:before {
  43.       background: #ff5964;
  44.       width: 100%;
  45.     }
  46.   </style>
  47. </head>
  48.  
  49. <body>
  50.   <div id="loading-btn">
  51.     <button><span>Hover me</span></button>
  52.   </div>
  53. </body>
  54.  
  55. </html>

 6、圆形加载按钮

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     #circle-btn {
  10.       display: flex;
  11.       align-items: center;
  12.       justify-content: center;
  13.       height: 100vh;
  14.     }
  15.  
  16.     .btn-container {
  17.       position: relative;
  18.     }
  19.  
  20.     button {
  21.       border: 0;
  22.       border-radius: 50px;
  23.       color: white;
  24.       background: #5f55af;
  25.       padding: 15px 20px 16px 60px;
  26.       text-transform: uppercase;
  27.       background: linear-gradient(to right, #f72585 50%, #5f55af 50%);
  28.       background-size: 200% 100%;
  29.       background-position: right bottom;
  30.       transition: all 2s ease;
  31.     }
  32.  
  33.     svg {
  34.       background: #f72585;
  35.       padding: 7.2px;
  36.       border-radius: 50%;
  37.       position: absolute;
  38.       left: -1px;
  39.       top: 0px;
  40.     }
  41.  
  42.     button:hover {
  43.       background-position: left bottom;
  44.     }
  45.   </style>
  46. </head>
  47.  
  48. <body>
  49.   <div id="circle-btn">
  50.     <div class="btn-container">
  51.       <svg t="1599631662798" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2421" width="32" height="32"><path d="M1010.80577 455.530292a29.72694 29.72694 0 0 1 0 42.037895L758.668226 749.785575a29.714963 29.714963 0 0 1-42.017934-42.027914l252.137544-252.227369a29.720951 29.720951 0 0 1 42.017934 0zM758.668226 203.312904l252.137544 252.217388a29.717957 29.717957 0 0 1-42.017934 42.037895l-252.137544-252.207407a29.721949 29.721949 0 0 1 42.017934-42.047876zM27.945419 447.20655h955.693411a20.460039 20.460039 0 0 1 20.460039 20.460039v18.254347a20.460039 20.460039 0 0 1-20.460039 20.460039H27.945419A20.460039 20.460039 0 0 1 7.48538 485.920936v-18.254347a20.460039 20.460039 0 0 1 20.460039-20.460039z" fill="#ffffff" p-id="2422"></path></svg>
  52.       <button>Hover me</button>
  53.     </div>
  54.   </div>
  55.  
  56. </body>
  57.  
  58. </html>

 

7、按钮点击波纹效果

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="utf-8" />
  6.   <title></title>
  7.   <style type="text/css">
  8.     * {
  9.       margin: 0;
  10.       padding: 0;
  11.     }
  12.  
  13.     .container {
  14.       width: 300px;
  15.       height: 300px;
  16.       margin: 50px auto;
  17.       /* background-color: rgba(204, 204, 204, .6); */
  18.       position: relative;
  19.     }
  20.  
  21.     .btn {
  22.       display: inline-block;
  23.       width: 100px;
  24.       height: 35px;
  25.       border-radius: 24px;
  26.       position: absolute;
  27.       top: 50%;
  28.       left: 50%;
  29.       transform: translate(-50%, -50%);
  30.       border: none;
  31.       outline: none;
  32.       cursor: pointer;
  33.       box-shadow: 0 10px 10px rgba(0, 0, 0, .3);
  34.     }
  35.  
  36.     .ripple-effect {
  37.       display: inline-block;
  38.       position: relative;
  39.       overflow: hidden;
  40.       cursor: pointer;
  41.       vertical-align: middle;
  42.       -webkit-user-select: none;
  43.       -moz-user-select: none;
  44.       -ms-user-select: none;
  45.       user-select: none;
  46.       z-index: 1;
  47.     }
  48.  
  49.     .ripple-effect .ripple {
  50.       display: block;
  51.       position: absolute;
  52.       border-radius: 100%;
  53.       /*设置背景为彩虹渐变，可以换成其他颜色*/
  54.       background: linear-gradient(45deg,
  55.           rgba(255, 0, 0, .5),
  56.           rgba(255, 255, 0, .5),
  57.           rgba(0, 255, 255, .5),
  58.           rgba(0, 0, 255, .5));
  59.       -webkit-transform: scale(0);
  60.       transform: scale(0);
  61.       pointer-events: none;
  62.     }
  63.  
  64.     .ripple-effect .animated {
  65.       -webkit-animation: ripple 0.6s linear;
  66.       animation: ripple 0.6s linear;
  67.     }
  68.  
  69.     @keyframes ripple {
  70.       100% {
  71.         opacity: 0;
  72.         -webkit-transform: scale(2.5);
  73.         transform: scale(2.5);
  74.       }
  75.     }
  76.   </style>
  77. </head>
  78.  
  79. <body>
  80.   <div class="container">
  81.     <button class="btn ripple-effect">Click
  82.       <span class="ripple"></span>
  83.     </button>
  84.   </div>
  85. </body>
  86. <script type="text/javascript">
  87.   window.onload = function () {
  88.     function ripple() {
  89.       var btn = document.querySelector(".btn");
  90.       var ripple = document.querySelector(".ripple");
  91.       btn.onclick = function (event) {
  92.         this.children[0].classList.add("animated");
  93.         var size;
  94.         //计算点击的波纹的最大值，并设置为宽高
  95.         size = Math.max(this.offsetWidth, this.offsetHeight);
  96.         ripple.style.width = size + "px";
  97.         ripple.style.height = size + "px";
  98.         //设置鼠标点击的位置为中心点，在这个中心点向四周散开的效果
  99.         ripple.style.top = -(this.offsetHeight - event.offsetY) + "px";
  100.         ripple.style.left = -(this.offsetWidth / 2 - event.offsetX) + "px";
  101.         setTimeout(function () {
  102.           btn.children[0].classList.remove("animated");
  103.         }, 800)
  104.       }
  105.     }
  106.     ripple();
  107.   }
  108. </script>
  109.  
  110. </html>

 8、流光按钮

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.     }
  13.  
  14.     body {
  15.       background: #000;
  16.     }
  17.  
  18.     a {
  19.       text-decoration: none;
  20.       position: absolute;
  21.       left: 50%;
  22.       top: 50%;
  23.       /* 居中 */
  24.       transform: translate(-50%, -50%);
  25.       font-size: 24px;
  26.       background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  27.       background-size: 400%;
  28.       width: 400px;
  29.       height: 100px;
  30.       color: #fff;
  31.       line-height: 100px;
  32.       text-align: center;
  33.       text-transform: uppercase;
  34.       border-radius: 50px;
  35.       z-index: 1;
  36.     }
  37.  
  38.     a::before {
  39.       content: "";
  40.       position: absolute;
  41.       left: -5px;
  42.       right: -5px;
  43.       top: -5px;
  44.       bottom: -5px;
  45.       background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  46.       background-size: 400%;
  47.       border-radius: 50px;
  48.       filter: blur(20px);
  49.       z-index: -1;
  50.     }
  51.  
  52.     a:hover::before {
  53.       animation: sun 8s infinite;
  54.     }
  55.  
  56.     a:hover {
  57.       animation: sun 8s infinite;
  58.     }
  59.  
  60.     @keyframes sun {
  61.       100% {
  62.         background-position: -400% 0;
  63.       }
  64.     }
  65.   </style>
  66. </head>
  67.  
  68. <body>
  69.   <a href="javascript:;">sunbutton</a>
  70. </body>
  71.  
  72. </html>

 9、边框按钮

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     #draw-border {
  10.       display: flex;
  11.       align-items: center;
  12.       justify-content: center;
  13.       height: 100vh;
  14.     }
  15.  
  16.     button {
  17.       border: 0;
  18.       background: none;
  19.       text-transform: uppercase;
  20.       color: #4361ee;
  21.       font-weight: bold;
  22.       position: relative;
  23.       outline: none;
  24.       padding: 10px 20px;
  25.       box-sizing: border-box;
  26.     }
  27.  
  28.     button::before,
  29.     button::after {
  30.       box-sizing: inherit;
  31.       position: absolute;
  32.       content: '';
  33.       border: 2px solid transparent;
  34.       width: 0;
  35.       height: 0;
  36.     }
  37.  
  38.     button::after {
  39.       bottom: 0;
  40.       right: 0;
  41.     }
  42.  
  43.     button::before {
  44.       top: 0;
  45.       left: 0;
  46.     }
  47.  
  48.     button:hover::before,
  49.     button:hover::after {
  50.       width: 100%;
  51.       height: 100%;
  52.     }
  53.  
  54.     button:hover::before {
  55.       border-top-color: #4361ee;
  56.       border-right-color: #4361ee;
  57.       transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
  58.     }
  59.  
  60.     button:hover::after {
  61.       border-bottom-color: #4361ee;
  62.       border-left-color: #4361ee;
  63.       transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
  64.     }
  65.   </style>
  66. </head>
  67.  
  68. <body>
  69.   <div id="draw-border">
  70.     <button>Hover me</button>
  71.   </div>
  72. </body>
  73.  
  74. </html>

 10、闪亮按钮

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     #shiny-shadow {
  10.       display: flex;
  11.       align-items: center;
  12.       justify-content: center;
  13.       height: 100vh;
  14.       background: #1c2541;
  15.     }
  16.  
  17.     button {
  18.       border: 2px solid white;
  19.       background: transparent;
  20.       text-transform: uppercase;
  21.       color: white;
  22.       padding: 15px 50px;
  23.       outline: none;
  24.       overflow: hidden;
  25.       position: relative;
  26.     }
  27.  
  28.     span {
  29.       z-index: 20;
  30.     }
  31.  
  32.     button:after {
  33.       content: '';
  34.       display: block;
  35.       position: absolute;
  36.       top: -36px;
  37.       left: -100px;
  38.       background: white;
  39.       width: 50px;
  40.       height: 125px;
  41.       opacity: 20%;
  42.       transform: rotate(-45deg);
  43.     }
  44.  
  45.     button:hover:after {
  46.       left: 120%;
  47.       transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
  48.       -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
  49.     }
  50.   </style>
  51. </head>
  52.  
  53. <body>
  54.   <div id="shiny-shadow">
  55.     <button><span>Hover me</span></button>
  56.   </div>
  57. </body>
  58.  
  59. </html>

 11、霓虹按钮

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     #neon-btn {
  10.       display: flex;
  11.       align-items: center;
  12.       justify-content: space-around;
  13.       background: #031628;
  14.       width: 50%;
  15.       height: 500px;
  16.     }
  17.  
  18.     .btn {
  19.       border: 1px solid;
  20.       background-color: transparent;
  21.       text-transform: uppercase;
  22.       font-size: 14px;
  23.       padding: 10px 20px;
  24.       font-weight: 300;
  25.     }
  26.  
  27.     .one {
  28.       color: #4cc9f0;
  29.     }
  30.  
  31.     .two {
  32.       color: #f038ff;
  33.     }
  34.  
  35.     .three {
  36.       color: #b9e769;
  37.     }
  38.  
  39.     .btn:hover {
  40.       color: white;
  41.       border: 0;
  42.     }
  43.  
  44.     .one:hover {
  45.       background-color: #4cc9f0;
  46.       -webkit-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
  47.       -moz-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
  48.       box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
  49.       transition: all ease-in 0.5s;
  50.     }
  51.  
  52.     .two:hover {
  53.       background-color: #f038ff;
  54.       -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  55.       -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  56.       box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  57.       transition: all ease-in 0.5s;
  58.     }
  59.  
  60.     .three:hover {
  61.       background-color: #b9e769;
  62.       -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  63.       -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  64.       box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  65.       transition: all ease-in 0.5s;
  66.     }
  67.   </style>
  68. </head>
  69.  
  70. <body>
  71.   <div id="neon-btn">
  72.     <button class="btn one">Hover me</button>
  73.     <button class="btn two">Hover me</button>
  74.     <button class="btn three">Hover me</button>
  75.   </div>
  76. </body>
  77.  
  78. </html>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/92700
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号