Creative Button Styles

CreativeButtons.zip

antd bnutton

https://code.juejin.cn/pen/7112314290681413662
image.png

阴影按钮

image.png

  1. .btn {
  2.   color: inherit;
  3.   cursor: pointer;
  4.   display: inline-block;
  5.   text-transform: uppercase;
  6.   letter-spacing: 1px;
  7.   font-weight: 700;
  8.   position: relative;
  9.   box-shadow: rgb(218, 150, 34) 0px 5px;
  10.   font-size: 20px;
  11.   height: 50px;
  12.   width: 220px;
  13.   line-height: 50px;
  14.   -webkit-tap-highlight-color: transparent;
  15.   border-width: initial;
  16.   border-style: none;
  17.   border-color: initial;
  18.   border-image: initial;
  19.   margin: 10px 30px;
  20.   outline: 0px;
  21.   background: rgb(252, 173, 38);
  22.   border-radius: 7px;
  23.   color: #fff;
  24. }
  26.  <button class="btn">按钮</button>

鼠标光标渐变跟踪

  1. <button class="mouse-cursor-gradient-tracking">
  2.   <span>Hover me</span>
  3. </button>
  5. .mouse-cursor-gradient-tracking {
  6.   position: relative;
  7.   background: #7983ff;
  8.   padding: 0.5rem 1rem;
  9.   font-size: 1.2rem;
  10.   border: none;
  11.   color: white;
  12.   cursor: pointer;
  13.   outline: none;
  14.   overflow: hidden;
  15. }
  16. .mouse-cursor-gradient-tracking span {
  17.   position: relative;
  18. }
  19. .mouse-cursor-gradient-tracking::before {
  20.   --size: 0;
  21.   content: '';
  22.   position: absolute;
  23.   left: var(--x);
  24.   top: var(--y);
  25.   width: var(--size);
  26.   height: var(--size);
  27.   background: radial-gradient(circle closest-side, pink, transparent);
  28.   transform: translate(-50%, -50%);
  29.   transition: width 0.2s ease, height 0.2s ease;
  30. }
  31. .mouse-cursor-gradient-tracking:hover::before {
  32.   --size: 200px;
  33. }
  35. var btn = document.querySelector('.mouse-cursor-gradient-tracking')
  36. btn.onmousemove = function(e) {
  37.   var x = e.pageX - btn.offsetLeft
  38.   var y = e.pageY - btn.offsetTop
  39.   btn.style.setProperty('--x', x + 'px')
  40.   btn.style.setProperty('--y', y + 'px')
  41. }

image.png

注意！
如果元素的父级具有定位上下文(position: relative )，您还需要减去它的偏移量。

  1. var x = e.pageX - btn.offsetLeft - btn.offsetParent.offsetLeft
  2. var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop

气泡动画按钮

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>按钮点击气泡效果-jq22.com</title>
  6. <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  7. <style>
  8. body {
  9.     font-size:16px;
  10.     font-family:'Helvetica','Arial',sans-serif;
  11.     text-align:center;
  12.     background-color:#f8faff;
  13. }
  14. .bubbly-button {
  15.     font-family:'Helvetica','Arial',sans-serif;
  16.     display:inline-block;
  17.     font-size:1em;
  18.     padding:1em 2em;
  19.     margin-top:100px;
  20.     margin-bottom:60px;
  21.     -webkit-appearance:none;
  22.     appearance:none;
  23.     background-color:#ff3de8;
  24.     color:#fff;
  25.     border-radius:4px;
  26.     border:none;
  27.     cursor:pointer;
  28.     position:relative;
  29.     transition:transform ease-in 0.1s,box-shadow ease-in 0.25s;
  30.     box-shadow:0 2px 15px rgba(255,0,251,0.5);
  31. }
  32. .bubbly-button:focus {
  33.     outline:0;
  34. }
  35. .bubbly-button:before,.bubbly-button:after {
  36.     position:absolute;
  37.     content:'';
  38.     display:block;
  39.     width:140%;
  40.     height:100%;
  41.     left:-20%;
  42.     z-index:-1000;
  43.     transition:all ease-in-out 0.5s;
  44.     background-repeat:no-repeat;
  45. }
  46. .bubbly-button:before {
  47.     display:none;
  48.     top:-75%;
  49.     background-image:radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,transparent 20%,#ff0081 20%,transparent 30%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,transparent 10%,#ff0081 15%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%);
  50.     background-size:10% 10%,20% 20%,15% 15%,20% 20%,18% 18%,10% 10%,15% 15%,10% 10%,18% 18%;
  51. }
  52. .bubbly-button:after {
  53.     display:none;
  54.     bottom:-75%;
  55.     background-image:radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,transparent 10%,#ff0081 15%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%);
  56.     background-size:15% 15%,20% 20%,18% 18%,20% 20%,15% 15%,10% 10%,20% 20%;
  57. }
  58. .bubbly-button:active {
  59.     transform:scale(0.9);
  60.     background-color:#e60074;
  61.     box-shadow:0 2px 25px rgba(255,0,130,0.2);
  62. }
  63. .bubbly-button.animate:before {
  64.     display:block;
  65.     animation:topBubbles ease-in-out 0.75s forwards;
  66. }
  67. .bubbly-button.animate:after {
  68.     display:block;
  69.     animation:bottomBubbles ease-in-out 0.75s forwards;
  70. }
  71. @keyframes topBubbles {
  72.     0% {
  73.     background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%;
  74. }
  75. 50% {
  76.     background-position:0% 80%,0% 20%,10% 40%,20% 0%,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%;
  77. }
  78. 100% {
  79.     background-position:0% 70%,0% 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;
  80.     background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%;
  81. }
  82. }@keyframes bottomBubbles {
  83.     0% {
  84.     background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0%;
  85. }
  86. 50% {
  87.     background-position:0% 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%;
  88. }
  89. 100% {
  90.     background-position:0% 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;
  91.     background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%;
  92. }
  93. }</style>
  94. </head>
  95. <body>
  96. <button class="bubbly-button">点击气泡动画</button>
  98. <script>
  99. var animateButton = function(e) {
  100.     e.preventDefault;
  101.     // reset animation 复位动画
  102.     e.target.classList.remove('animate');
  103.     e.target.classList.add('animate');
  104.     setTimeout(function() {
  105.         e.target.classList.remove('animate');
  106.     }, 700);
  107. };
  109. var btn = document.getElementsByClassName("bubbly-button");
  110. for (var i = 0; i < btn.length; i++) {
  111.     btn[i].addEventListener('click', animateButton, false);
  112. }
  113. </script>
  115. </body>
  116. </html>

点击查看【codepen】

霓虹按钮

  1. <!DOCTYPE html>
  2. <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">
  8.     <title></title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.             font-family: "Poppins", sans-serif;
  15.         }
  17.         html,
  18.         body {
  19.             display: grid;
  20.             height: 100%;
  21.             place-items: center;
  22.             background: #000;
  23.             overflow: hidden;
  24.         }
  26.         button {
  27.             position: relative;
  28.             height: 60px;
  29.             width: 200px;
  30.             margin: 0 35px;
  31.             border-radius: 50px;
  32.             border: none;
  33.             outline: none;
  34.             background: #111;
  35.             color: #fff;
  36.             font-size: 20px;
  37.             letter-spacing: 2px;
  38.             text-transform: uppercase;
  39.             cursor: pointer
  40.         }
  42.         button:first-child:hover {
  43.             background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  44.             background-size: 400%;
  45.         }
  47.         button:last-child:hover {
  48.             background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  49.             background-size: 400%;
  50.         }
  52.         button:first-child:before,
  53.         button:last-child:before {
  54.             content: '';
  55.             position: absolute;
  56.             background: inherit;
  57.             top: -5px;
  58.             right: -5px;
  59.             bottom: -5px;
  60.             left: -5px;
  61.             border-radius: 50px;
  62.             filter: blur(20px);
  63.             opacity: 0;
  64.             transition: opacity 0.5s;
  65.         }
  67.         button:first-child:hover:before,
  68.         button:last-child:hover:before {
  69.             opacity: 1;
  70.             z-index: -1;
  71.         }
  73.         button:hover {
  74.             z-index: 1;
  75.             animation: glow 8s linear infinite;
  76.         }
  78.         @keyframes glow {
  79.             0% {
  80.                 background-position: 0%;
  81.             }
  83.             100% {
  84.                 background-position: 400%;
  85.             }
  86.         }
  87.     </style>
  88. </head>
  90. <body>
  91.     <div class="buttons">
  92.         <button>Button</button>
  93.         <button>Button</button>
  94.     </div>
  95. </body>
  97. </html>

image.png