I also discovered it when I was making the project. I found a lot of demos, tested it bit by bit, and found that this button is also very cool.

Several attributes are used, @keyframes, ::after, ::before

Let's find out what they are for

@keyframes

Keyframe @keyframes at-rule rules control intermediate steps in a CSS animation sequence by defining the style of keyframes (or waypoints) in the animation sequence. In contrast to transitions, keyframes can control intermediate steps in an animation sequence.

How to use keyframes:

To use keyframes, first create a named @keyframes rule that you can then use the animation-name property to match animations to their keyframe declarations. Each @keyframes rule contains multiple keyframes, that is, a style block statement. Each keyframe has a percentage value as its name, which represents at which stage the style contained in this frame is triggered during the animation.

::after

CSS pseudo-elements ::afterare used to create a pseudo-element as the last child of the selected element. Usually, the content attribute is used to add decorative content to the element. This virtual element is an inline element by default.

His grammatical format:

element:after  { style properties }  /* CSS2 语法 */

element::after { style properties }  /* CSS3 语法 */

::after The notation is in CSS 3 中引入的，::: 符号是用来区分[伪类](/zh-CN/CSS/Pseudo-classes)和伪元素的。支持 CSS3 的浏览器同时也都支持 CSS2 中引入的表示法after`.

::before

In css, ::before is a pseudo-class element that represents the generated content element and represents the first child element of the abstractable style of the corresponding element, that is: the first child element of the selected element.

Use ::before to insert the content to be inserted before other content of the element, and display it inline by default. ::before needs to use the content attribute to specify the value of the content.

For example: add a star in front of the link, etc..

a::before{
content:"★"
}

Well, let's do this first, let's take a look at today's theme:

The button realizes the effect:

The overall code is as follows:

The style of the button is a bit too much. When using it, it can be encapsulated into a method, or encapsulated into a separate css page. When using it, just refer to the style to the page to be used.

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>css——button</title>
    <style>
.dialog_but {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 13rem;
  height: 3rem;
  background-size: 300% 300%;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  transition: 0.5s;
  animation: gradient_301 5s ease infinite;
  border: double 4px transparent;
  background-image: linear-gradient(#212121, #212121),  linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

#dialog_container {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
}

strong {
  z-index: 2;
  font-family: 'Avalors Personal Use';
  font-size: 12px;
  letter-spacing: 5px;
  color: #FFFFFF;
  text-shadow: 0 0 4px white;
}

#dialog_glow {
  position: absolute;
  display: flex;
  width: 12rem;
}

.dialog_circle {
  width: 100%;
  height: 30px;
  filter: blur(2rem);
  animation: pulse_3011 4s infinite;
  z-index: -1;
}

.dialog_circle:nth-of-type(1) {
  background: rgba(254, 83, 186, 0.636);
}

.dialog_circle:nth-of-type(2) {
  background: rgba(142, 81, 234, 0.704);
}

.dialog_but:hover #dialog_container {
  z-index: 1;
  background-color: #212121;
}

.dialog_but:hover {
  transform: scale(1.1)
}

.dialog_but:active {
  border: double 4px #FE53BB;
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: none;
}

.dialog_but:active .dialog_circle {
  background: #FE53BB;
}

#dialog_content_container {
  position: relative;
  background: transparent;
  width: 200rem;
  height: 200rem;
}

#dialog_content_container::after {
  content: "";
  position: absolute;
  top: -10rem;
  left: -100rem;
  width: 100%;
  height: 100%;
  animation: animStarRotate 90s linear infinite;
}

#dialog_content_container::after {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
}

#dialog_content_container::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: animStar 60s linear infinite;
}

#dialog_content_container::before {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
  opacity: 0.5;
}
/*控制按钮中 小点点的移动*/
@keyframes animStar {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-135rem);
  }
}
/*控制按钮中 小点点的旋转*/
@keyframes animStarRotate {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0);
  }
}

@keyframes gradient_301 {
  0% {
    background-position: 0% 50%;
  }

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

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse_3011 {
  0% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
    </style>
  </head>

<body>
 <button type="button" class="dialog_but">
   <strong>按钮</strong>
   <div id="dialog_container">
     <div id="dialog_content_container"></div>
   </div>
 
   <div id="dialog_glow">
     <div class="dialog_circle"></div>
     <div class="dialog_circle"></div>
   </div>
 </button>


</body>

</html>

Pure css to achieve super cool star background button

@keyframes

How to use keyframes:

::after

::before

The button realizes the effect:

Guess you like