css3超酷的按钮鼠标经过特效

CodeAE

今天分享一个超酷的css3按钮鼠标经过特效，相信对大家对css3的学习和理解会有不小的帮助。
具体请查看以下示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>爱心按钮特效</title>
</head>
<style>
  body{
  text-align: center;
  padding: 10% 0;
  }
  a{
  width: 240px;
  height: 66px;
  line-height: 66px;
  text-align: center;
  border-radius: 100px;
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
  position: relative;
  display: block;
  z-index: 1;
  margin: 0 auto;
  }
  a::before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: "";
  background-color: #20a0ff;
  background-image: radial-gradient(circle farthest-corner at 100% 0,#f09c33 0,#f59234 4%,#f98736 7%,#fd7b38 10%,#ff6e3c 14%,#ff5f41 18%,#ff4e46 21%,#ff384b 25%,#fd1851 29%,#f90059 32%,#f50062 36%,#f0006c 39%,#e90077 43%,#e10083 46%,#d70090 50%,#20a0ff 75%,#20a0ff 100%);
  background-position: 0 0;
  background-size: 400% 100%;
  border-radius: inherit;
  transition: background-position 1s cubic-bezier(.35,.35,0,1);
  }
  a::after{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 4rem;
  height: 100%;
  content: "";
  background: linear-gradient(90deg,rgba(255,243,225,0),#fff3e1);
  opacity: 0;
  }
  a:hover::before{
  background-position: 85%;
  }
  a:hover::after{
  animation: aihongxin .85s cubic-bezier(.65,0,.35,1) .15s;
  }
  @-webkit-keyframes aihongxin {
  0% {
    opacity: 0;
    transform: translate3d(-4rem,0,0) skewX(45deg)
  }
  50% {
    opacity: .15
  }
  to {
    opacity: 0;
    transform: translate3d(4rem,0,0) skewX(45deg)
  }
  }
</style>
<body>
  <a href="http://www.codeae.com/" target="_blank">红爱心按钮特效</a>

运行测试代码

[Html/CSS] css3超酷的按钮鼠标经过特效

相关帖子

WordPress显示当前文章分类下的最新文章

常用jquery右健禁止命令

浅谈Nodejs+nodemailer怎么发送邮件

H5+JS+CSS3实现七夕言情源码分享

7种好看的鼠标点击效果

好看的CSS3滑动按钮特效

CSS3荧光灯文字闪烁动画特效

css3怎样设置子元素居中的方法

node Express学习之聊聊中间件

CodeAE LV9