Neon Effect on button animation illusiion using css and html5-JS Tutorial-php.cn

Neon Effect on button animation illusiion using css and html5

Patricia Arquette

Release： 2024-12-08 09:53:11

Original

717 people have browsed it

Neon Effect on button animation illusiion using css and html5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Illusionistic 3D Neon Button</title>
  <link rel="stylesheet" href="2.css">
</head>
<body>
  <div>





<pre class="brush:php;toolbar:false">* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  overflow: hidden;
  font-family: "Courier New", monospace;
  position: relative;
  color: white;
}

/* Binary code background */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
  z-index: 0;
  pointer-events: none;
  mask: repeating-linear-gradient(
    0deg,
    transparent 0%,
    transparent 20%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.1) 40%
  );
  animation: binaryMove 5s linear infinite;
}

@keyframes binaryMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

.button-container {
  position: relative;
  z-index: 1;
}

.neon-button {
  padding: 20px 60px;
  font-size: 1.5rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), 0 0 30px rgba(255, 0, 255, 0.5);
  overflow: hidden;
  transition: all 0.3s ease;
}

.neon-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ff00ff, #00ffff);
  filter: blur(15px);
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.neon-button:hover {
  transform: translateY(-5px) rotate(2deg);
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.7), 0 0 60px rgba(255, 0, 255, 0.7);
}

.neon-button:hover::before {
  opacity: 1;
  filter: blur(25px);
}

.neon-button:active {
  transform: translateY(3px);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.9), 0 0 20px rgba(255, 0, 255, 0.9);
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: ripple-animation 1s linear infinite;
}

@keyframes ripple-animation {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(10);
    opacity: 0;
  }
}

.neon-button:active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff00ff, #00ffff);
  opacity: 0.4;
  filter: blur(10px);
  animation: ripple-animation 0.8s linear;
}

Copy after login

The above is the detailed content of Neon Effect on button animation illusiion using css and html5. For more information, please follow other related articles on the PHP Chinese website!