Home >Web Front-end >JS Tutorial >Neon Effect on button animation illusiion using css and html5

Neon Effect on button animation illusiion using css and html5

Patricia ArquetteOriginal: 2024-12-08 09:53:11727browse

<!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;
}

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!

html5 css using animation

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Inline Event Handlers vs. Event Listeners: Which Method Should You Choose for Web Development?Next article：Inline Event Handlers vs. Event Listeners: Which Method Should You Choose for Web Development?

See more

Neon Effect on button animation illusiion using css and html5

Related articles