灏天阁

css登录按钮炫酷效果

· Yin灏

css登录按钮炫酷效果

分析

我们抛开 before 不谈的话；其实原理和上一篇文章是一致的css 是你永远学不会的语言；都是通过背景大小以及配合位置达到颜色渐变的效果。

  • text-transform: uppercase；是指将字母转为大写
  • 然后设置背景和背景大小
  • 当鼠标移入（hover）按钮时改变其定位即可

效果一：

1.gif

这种效果的话就不会那么炫酷，或者说花里胡哨的 😂；我觉得如果在写一些效果上，应该这种比较适合一些，然后配合自己需要的颜色即可。

复制一下代码即可预览

<!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>Document</title>
    <style>
      .btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 230px;
        height: 90px;
        line-height: 90px;
        text-align: center;
        color: #fff;
        font-size: 25px;
        text-transform: uppercase;
        cursor: pointer;
        background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
        background-size: 400%;
        border-radius: 60px;
      }

      .btn:hover {
        animation: animate 8s linear infinite;
      }

      @keyframes animate {
        0% {
          background-position: 0%;
        }

        100% {
          background-position: 400%;
        }
      }
    </style>
  </head>

  <body>
    <b href="#" class="btn">register</b>
  </body>
</html>

效果二:

2.gif

注意：filter: blur(20px)是设置高斯模糊

复制一下代码即可预览

<!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>Document</title>
    <style>
      .btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 230px;
        height: 90px;
        line-height: 90px;
        text-align: center;
        color: #fff;
        font-size: 25px;
        text-transform: uppercase;
        cursor: pointer;
        background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
        background-size: 400%;
        border-radius: 60px;
      }

      .btn:hover {
        animation: animate 8s linear infinite;
      }

      @keyframes animate {
        0% {
          background-position: 0%;
        }

        100% {
          background-position: 400%;
        }
      }

      .btn::before {
        content: "";
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        z-index: -1;
        background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
        background-size: 400%;
        border-radius: 40px;
        opacity: 0;
        transition: 0.5s;
      }

      .btn:hover::before {
        filter: blur(20px);
        opacity: 1;
        animation: animate 8s linear infinite;
      }
    </style>
  </head>

  <body>
    <b href="#" class="btn">register</b>
  </body>
</html>

- Book Lists -