css美化按钮悬浮星星发光动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：css美化按钮悬浮星星发光动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<style>
.button {
  display: flex;
  margin: 100px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
  display: flex;
  width: 240px;
  height: 80px;
  border-radius: 40px;
  box-sizing: border-box;
  border: solid 1px #fff;
  text-decoration: none;
}
.button::before, .button::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 40px;
  transition: all ease 0.8s;
}
.button::after {
  mix-blend-mode: multiply;
}
.button .glow_back {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
  width: 218px;
  height: 44px;
  transition: all ease 0.8s;
  mix-blend-mode: overlay;
  clip-path: path("m209.63,21.67l-2.74.22,4.07,2.6-9.12-2.63,4.9,3.26.24,1.34-6.87-2.78,11.15,8.28-5.67-2.31-1.76.13,1.84,3.14.97,2.79-8.85-7.21,5.88,8.34-4.99-4.04-2.89-2.09,2.29,5.65.07,2.94-1.87-.38-4.57-7.16-1.78-1.97-.19,2.59-1.03.18-1.21-.85-.53,4.2-1.1,2.39-1.36.69-1.31-3.46-1.3,3.43-1.3,2.47-1.3-1.14-1.3,3.72-1.3-8.89-1.3-2.91-1.3.92-1.3,9.08-1.3-4.94-1.3,2.97-1.3-5.84-1.3-1.52-1.3,4.5-1.3,6.44-1.3-7.17-1.3,3.91-1.3-9.47-1.3,8.47-1.3-.18-1.3,3.18-1.3-2-1.3-8.04-1.3,9.25-1.31-8.09-1.31,8.93-1.31-4.37-1.31,5.17-1.31-6.01-1.3,6.09-1.3-7.67-1.3,2.38-1.3-4.87-1.3,9.41-1.3-6.56-1.3-2.02-1.3,2.55-1.3-4.89-1.3,8.88-1.3,2.59-1.3-2.87-1.3,2.76-1.31-2.34-1.31-7.51-1.31,8.22-1.31-1.28-1.31-1.55-1.31-7.27-1.31,9.27-1.3-7.66-1.3,1.32-1.3,9.46-1.3-12.65-1.31.78-1.31,9.82-1.31-5.85-1.31,7.43-1.31-9.94-1.31,4.73-1.31-5-1.31,10.39-1.31-11.07-1.31-.92-1.31,9.25-1.31-1.73-1.31-1.77-1.31,5.08-1.31-8.19-1.31,4.41-1.31,1.25-1.31-6.67-1.31-1.7-1.31,10.54-1.31-1.7-1.31-7.25-1.31,3.28-1.31.36-1.31,2.37-1.31,1.69-1.31-.51-1.31-2.43-1.31.96-1.3-4.48-1.3,1.02-1.31,4.88-1.31-1.57-1.31,1.41-1.31-3.53-1.3,6.02-1.3-6.14-1.31,6.65-1.31-6.3-1.31,1.77-1.31-4.96-1.31-.87-1.31,11.16-1.31-3.56-1.31-8.2-1.31,1.74-1.31,7.25-1.31,1.27-1.31-10.58-1.31,3.37-1.31-1.44-1.31-1.57-1.31,11.69-1.31-10.29-1.31,3.55-1.31.6-1.31-3.37-1.31,3.78-1.31-5.84-1.31-.6-1.32-.11-1.32,2.37-.96-2.87-1.62,5.87-1.4.55-.93-1.85.16-4.93-2.34,3.81-.48-1.9-4.98,7.89-2.13.66,2.36-6.86,2.19-5.28-.65-.64-9.29,9.49,4.56-7.03-3.66,2-1.6-.28,3.83-4.69,1.91-2.61-12.76,7.37,4.28-4.27-6.14,1.93,9.4-6.15-10.98,3.68,12.01-6.11-3.41.24-6.77.93,5.22-2.56-5.3.04-4.88-.44,12.73-2.91-6.16-.38-5.06-.91,1.98-1.3h7.65L.65,13.1l12.8-.34-1.69-1.04-3.48-1.48.11-1.06-3.58-1.98,5.37.26L2.65,3.86l11.79,3.01-6.39-3.72,6.61,1.83.96-.56-3.19-2.25,2.49.25,4.79-.04-4.72,2.56,6.12-.93,3.08-.24-10.85,6.11,9.92-3.68-8.49,6.15,5.54-1.93-3.87,4.27,11.53-7.37-1.73,2.61-3.46,4.69,1.45.28,3.3-2-4.12,7.03,8.4-9.49.59.64-1.98,5.28-2.13,6.86,1.92-.66,4.49-7.88.43,1.9,2.11-3.81-.15,4.93.84,1.85,1.26-.55,1.47-5.87.87,2.87,1.19-2.37,1.19.11,1.19.6,1.18,5.84,1.19-3.78,1.18,3.37,1.18-.6,1.18-3.55,1.18,10.29,1.18-11.69,1.18,1.57,1.18,1.44,1.18-3.37,1.18,10.58,1.18-1.27,1.18-7.25,1.18-1.74,1.18,8.2,1.18,3.56,1.18-11.16,1.18.87,1.18,4.96,1.18-1.77,1.18,6.3,1.18-6.65,1.18,6.14,1.18-6.02,1.18,3.53,1.18-1.41,1.18,1.57,1.18-4.88,1.18-1.02,1.18,4.48,1.18-.96,1.18,2.43,1.18.51,1.18-1.69,1.18-2.37,1.18-.36,1.18-3.28,1.18,7.25,1.18,1.7,1.18-10.54,1.18,1.7,1.18,6.67,1.18-1.25,1.18-4.41,1.18,8.19,1.18-5.08,1.18,1.77,1.18,1.73,1.18-9.25,1.18.92,1.18,11.07,1.18-10.39,1.18,5,1.18-4.73,1.18,9.94,1.18-7.43,1.18,5.85,1.18-9.81,1.18-.78,1.18,12.65,1.18-9.46,1.18-1.32,1.18,7.66,1.18-9.27,1.18,7.27,1.18,1.55,1.18,1.28,1.18-8.22,1.18,7.51,1.18,2.34,1.18-2.76,1.18,2.87,1.18-2.59,1.18-8.88,1.18,4.89,1.18-2.56,1.18,2.02,1.18,6.56,1.18-9.41,1.18,4.87,1.18-2.38,1.18,7.67,1.18-6.09,1.18,6.01,1.18-5.17,1.18,4.37,1.18-8.93,1.18,8.09,1.18-9.25,1.18,8.04,1.18,2,1.18-3.18,1.18.18,1.18-8.47,1.18,9.47,1.18-3.91,1.18,7.17,1.18-6.44,1.18-4.5,1.18,1.52,1.18,5.84,1.18-2.97,1.18,4.94,1.18-9.08,1.18-.92,1.18,2.91,1.18,8.89,1.18-3.72,1.18,1.14,1.18-2.47,1.18-3.43,1.18,3.46,1.23-.69.99-2.39.47-4.2,1.09.85.93-.18.17-2.59,1.61,1.97,4.13,7.16,1.69.38-.06-2.94-2.07-5.65,2.61,2.09,4.51,4.04-5.31-8.34,8,7.21-.88-2.79-1.66-3.14,1.59-.13,5.12,2.31-10.07-8.29,6.21,2.78-.22-1.34-4.43-3.26,8.24,2.63-3.67-2.6,2.47-.22,2.47-.43h.76s-.41.34-.41.34l.85-.35,3.89-.04-1.52-.95,5.5-2.29,1.25.87,1.58.77-1,1.84-9.15,4.41,3.25-.05,2.73.33-4.53,2,4.65.13.17,1.03-5.55,1.48-.56.83,11.92.79h-9.98l.66.89,9.69,1.66-10.36.06,8.31,2.21,3.45,1.94-5.63.05-2.74.43Zm-3.95-18.98l1.79.54-.98-.61-.82.06Z");
}
.button .glow_front {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 220px;
  height: 68px;
  background: #360082;
  mix-blend-mode: screen;
  opacity: 0.5;
  clip-path: path("m58.67,41.32l6.82,22.39-30.16,2.69,23.33-25.08ZM38.33,5.04l-7.07,1.43,5.89,8,1.18-9.43ZM14.14,49.43l19.4,9.23,17.03-21.36-36.43,12.13Zm-7.32-14.1l-.65,15.05,41.43-20.27-40.78,5.22Zm17.54-10.54l-18.19,2.04,5.41,4.26,12.78-6.3Zm195.63-4.06l-15.52-15.69-38.09,18.86,53.61-3.17Zm-6.18,6.1l-18.19-2.04,12.78,6.3,5.41-4.26ZM171.77,0l-18.22,17.69,26.3-14.32-8.08-3.37Zm16.97,6.47l-7.07-1.43,1.18,9.43,5.89-8ZM48.23,0l-8.08,3.37,26.3,14.32L48.23,0ZM15.52,5.04L0,20.73l53.61,3.17L15.52,5.04Zm133.58,53.38l5.41-4.26-7.82-10.3,2.41,14.57Zm-12.78,3.5l12.76,3.32-17.47-21.78,4.71,18.46Zm23.78,4.48l21.56-7.98-20.34-17.1-1.23,25.08Zm33.01.61l12.75-17.58-36.43-12.13,23.68,29.71Zm23.31-14.04v-19.4l-44.03-3.47,44.03,22.86Zm-125.56,8.57l7.62,4.4-.77-15.57-6.85,11.17Zm32.47.39l11.91,6.06-12.96-17.62,1.05,11.56Zm-57.84-7.78l5.41,4.26,2.41-14.57-7.82,10.3Zm5.43,11.09h17.19l-6.18-24.55-11.01,24.55Zm42.62-4.09l1.11-18.93-12.98,24.18,11.86-5.25Z");
}
.button .twinkle_white {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 210px;
  height: 58px;
  background: rgba(255, 255, 255, 0.7);
  transition: all ease 0.8s;
  clip-path: path("m31.82,21c-1.13,3.75-4.54,8.87-8.93,6.69-1.67-.97-2.72-3.28-4.65-3.22l.11.48c-4.32,4.59-10.64,7.19-16.91,6.95-.98.09-1.53-.69-1.44-1.65.28-7.27-.23-17.33,7.77-20.5,5.04-3.01,11.13-2.4,15.73,1.23,2.79,1.52,2.87,4.66,1.66,7.37,2.9-.38,8.77-2.98,6.66,2.63Zm5.66-15.43c-1.42-.76-3.09.16-4.33.92-3.86,2.54-1.24,4.8,1.97,5.83,3.16,1.03,4.88-5.29,2.36-6.74ZM50.32.14c-1.99-.45-3.91,1.25-4.3,3.16-.74,1.87,1.24,5.51,3.05,3.08,1.75-1.53,5.02-4.99,1.25-6.24Zm11.3,1.45c.06,1.44-2.04,2.15-2.84.97-1.55-2.31,2.52-3.9,2.84-.98,0,0,0,0,0,.01Zm-2.99-.01s0,.05,0,.08c0-.03,0-.05,0-.08Zm122.94,39.65c-1.89-.28-6.49,2.59-6.38,4.72,0,1.3,1.32,2.53,2.59,2.03,3.17,2.13,7.67-5.14,3.79-6.75Zm26.14,4.19c-3.76-.72-7.78.11-10.96,2.25-.61-.63-.25-1.88-.95-2.39-.52-.38-1.23-.09-1.79.2-1.43.74-3.39,1.6-3.39,1.6-1.5.31-.11,3.55.99,3.76,1.42.08,1.65.91.97,2.13-.84,1.64-2.03,5.38,1.05,5,6.46-.3,12.66-4.03,15.99-9.62,1.09-1.42-.36-2.71-1.91-2.93Zm-43.05,6.57c1.25,2.17-1.97,4.41-3.54,2.51-.94.51-2.16-.29-2.13-1.35.4-2.45,4.46-3.64,5.68-1.16Zm-1.16.73s-.04-.05-.05-.07c.05.09.1.17.14.27-.03-.07-.06-.14-.08-.2Zm-15.96-.78c-.89-.86-2.7-.49-3.17.66-.61,1.23.9,2.6,2.06,1.91,1.32.1,2.06-1.65,1.11-2.57Zm24.81-.73c-1.2-1.91-4.04.04-2.49,1.76,1.2,1.91,4.04-.04,2.49-1.76Z");
}
.button .twinkle_color {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  bot.........完整代码请登录后点击上方下载按钮下载查看