【每日一练】25—CSS实现按钮悬停发光动画效果

原创

wx6332e0803afcf 2022-11-07 16:25:11 ©著作权

文章标签 2d html css 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者wx6332e0803afcf的原创作品，请联系作者获取转载授权，否则将追究法律责任

【每日一练】25—CSS实现按钮悬停发光动画效果_html

按钮，一直是网站开发项目中不可或缺的内容之一，很多时候，为了做一个好看有趣的动画效果，总是要花很多心思，我们在前面也分享了一些按钮的练习项目。

今天，我们再来练习一个新的关于按钮的效果，下面，我们一起来看一下今天这个项目的最终效果：

【每日一练】25—CSS实现按钮悬停发光动画效果_css_02

HTML代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>【每日一练】25—CSS实现按钮悬停发光动画效果</title>
  </head>
  <body>
    <div class="container">
      <a href="http://www.aierweisi.com"  target="_blank"><span>服务器主机站</span></a>
      <a href="http://www.webqdkf.com" target="_blank"><span>web前端开发网站</span></a>
      <a href="http://www.aierweisi.com"  target="_blank"><span>服务器主机站</span></a>
      <a href="http://www.webqdkf.com" target="_blank"><span>web前端开发网站</span></a>
    </div>
  </body>
</html>

CSS代码：

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000;
}
.container
{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
a
{
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  color: #fff;
  background: transparent;
  border: 2px solid #42db14;
  text-transform: uppercase;
  font-weight: 600;
  margin: 40px;
  letter-spacing: 2px;
  text-decoration: none;
  transition: 0.5s;
  transition-delay: 0s;
  -webkit-box-reflect: below 0px linear-gradient(transparent,#0002);
}
a:hover
{
  transition-delay: 1.5s;
  color: #fff;
  box-shadow: 0 0 10px #42db14,
        0 0 20px #42db14,
        0 0 40px #42db14,
        0 0 80px #42db14,
        0 0 160px #42db14;
}
a:nth-child(2)
{
  filter: hue-rotate(40deg);
}
a:nth-child(3)
{
  filter: hue-rotate(70deg);
}
a:nth-child(4)
{
  filter: hue-rotate(90deg);
}
a span
{
  position: relative;
  z-index: 10;
}
a:before
{
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: #42db14;
  transition: width 0.5s,left 0.5s, height 0.5s,box-shadow 0.5s;
  transition-delay: 1s,0.5s,0s,0s;
  box-shadow: 5px -8px 0 #42db14,
        5px 8px 0 #42db14;
}
a:hover:before
{
  width: 60%;
  height: 100%;
  left: -2px;
  transition-delay: 0s,0.5s,1s,1s;
  box-shadow: 0px 0 0 #42db14,
        0px 0 0 #42db14;
}
a:after
{
  content: '';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: #42db14;
  transition: width 0.5s,right 0.5s, height 0.5s,box-shadow 0.5s;
  transition-delay: 1s,0.5s,0s,0s;
  box-shadow: -5px -8px 0 #42db14,
        -5px 8px 0 #42db14;
}
a:hover:after
{
  width: 60%;
  height: 100%;
  right: -2px;
  transition-delay: 0s,0.5s,1s,1s;
  box-shadow: 0px 0 0 #42db14,
        0px 0 0 #42db14;
}