css实现鼠标悬浮发光倒影按钮动画效果代码

代码语言:html

所属分类:悬停

代码描述:css实现鼠标悬浮发光倒影按钮动画效果代码

代码标签: css 鼠标 悬浮 发光 倒影 按钮

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-size: 62.5%;
    background: #23252f;
    font-family: 'Lato', sans-serif;
}

a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none;
    color: #64ed85;
    /* color: #23252f; */
    font-size: 4vmax;
    padding: 15px 35px;
    overflow: hidden;
    border-radius: 5px;
    transition: background .5s, color .5s;
    -webkit-box-reflect: below 30px linear-gradient(transparent, #64ed842a);
}

a:hover {
    background: #64ed85;
    box-shadow: 0 0 40px #64ed85;
    color: #23252f;
    transition: background .5s, color .5s;
    filter: hue-rotate(20deg);
}

a:active {
    box-shadow.........完整代码请登录后点击上方下载按钮下载查看

网友评论0