Neon button

5.2.2025 • 7.2.2025 (aktualizováno)

CSS CSS trick

index.html Raw #

<!-- https://jsbin.com/liyigoniku/edit?html,css,output -->
<!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">
  <link rel="stylesheet" href="style.css">
  <title>Neon Button</title>
</head>
<body>
  <a class="neon">Neon</a>
</body>
</html>

index.css Raw #

/**
*  @project   CSS Neon Button
*  @author    Jamshid Elmi
*  @created   2022-04-06 23:37:45
*  @modified  2022-04-06 23:37:45
*  @tutorial  https://youtu.be/Jqsb06RlQ6g
*/
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');

:root {
  --clr-neon: #14f7ff;
  --clr-bg: #001414;
  --font-size: 3rem;
}

*, 
*::after,
*::before {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--clr-bg);
  color: var(--clr-neon);
  font-family: "Balsamiq Sans";
  overflow: hidden;
}

.neon {
  margin-top: -150px;
  font-size: var(--font-size);
  display: inline-block;
  position: relative;
  cursor: pointer;
  border: var(--clr-neon) 0.125em solid;
  padding: 0.25em 1em;
  border-radius: 0.25em;
  text-shadow: 
    0 0 .20em #FFF7,
    0 0 .30em var(--clr-neon);
  box-shadow: 
    inset 0 0 .5em var(--clr-neon),
          0 0 .5em var(--clr-neon);
}

.neon::before {
  content: "";
  position: absolute;
  top: 140%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clr-neon);
  transform: 
    perspective(0.2em)
    rotateX(10deg) 
    scale(1.3, 0.40);
  filter: blur(0.5em);
  opacity: 0.6;

  pointer-events: none;
  transition: opacity 100ms linear;
}

.neon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--clr-neon);
  box-shadow: 0 0 2em var(--clr-neon);
  z-index: -1;
  opacity: 0;
  transition: opacity 100ms linear;
}

.neon:hover::after {
  opacity: 1;
}
.neon:hover, .neon:focus {
  color: white;
}
.neon:hover::before {
  opacity: 0.8;
}