css渐变按钮悬浮背景动画效果代码-html代码-BFW代码库

css渐变按钮悬浮背景动画效果代码

代码语言：html

所属分类：悬停

代码描述：css渐变按钮悬浮背景动画效果代码

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

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

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


    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* RALEWAY FONT */
    /* ==================================================== */
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap');
    
    /* DEFAULTS */
    /* ==================================================== */
    :root {
      --global-c: hsl(0, 0%, 90%);
      --global-bg: hsl(210, 25%, 10%);
    }
    
    body {
      color: var(--global-c);
      background: var(--global-bg);
      font-family: Raleway;
      min-height: 100vh;
      margin: 0;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .meta {
      padding-top: 5vh;
    }
    
    .meta,
    main {
      padding-bottom: calc(100px + 5vh);
      text-align: center;
    }
    
    /* MAIN */
    /* ==================================================== */
    button {
      display: inline-block;
      border: none;
      border-radius: 100px;
      margin: 20px 20px 80px;
      padding: 4px;
      font-size: 1.5rem;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 2px;
      background: linear-gradient(to right bottom, var(--bg));
      position: relative;
      cursor: pointer;
    }
    
    button:before {
      content: '';
      width: 1em;
      height: 1em;
      border-radius: 1em;
      display: inline-block;
      background: linear-gradient(to right bottom, var(--bg));
      position: absolute;
      top: 200%;
      left: -10%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
    
    button:nth-child(2n)::before {
      top: -100%;
      left: 100%;
      opacity: .8;
      width: .5em;
      height: .5em;
    }
    
    span {
      display: inherit;
      border-radius: inherit;
     .........完整代码请登录后点击上方下载按钮下载查看